<div class="longread-box_img">
	<picture>
		<source data-lazy-srcset='<?=$bigImg["src"]?>' media='(min-width: 1024px)'>
		<source data-lazy-srcset='<?=$mdImg["src"]?>' media='(min-width: 768px) and (max-width: 1023px)'>
		<source data-lazy-srcset='<?=$smImg["src"]?>' media='(min-width: 525px) and (max-width: 767px)'>
		<source data-lazy-srcset='<?=$xsImg["src"]?>' media='(max-width: 524px)'>
		<img class="img-responsive header-static_bg" lazy-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["PROPERTIES"]["PHOTOS"]["DESCRIPTION"][$n]?>">
		<!-- <img class="img-responsive" src="<?=$bigImg["src"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["PROPERTIES"]["PHOTOS"]["DESCRIPTION"][$n]?>"> -->
	</picture>

</div>

	var singlePicLazy = $('.longread-box_img');
	var windowHe = $(window).height();

	$(window).on('scroll', function() {
		// var scrollTop = $(window).scrollTop();


		// console.log(scrollTop);

		if (singlePicLazy.length > 0) {
			singlePicLazy
				.each(function () {
					var _self = $(this);
					var ttop = _self.offset().top - $(window).scrollTop();

					if (ttop < windowHe) {
						_self
							.find('picture')
							.find('source[data-lazy-srcset]')
							.each(function (i, source) {
								if (window.matchMedia(source.media).matches) {
									_self.find('img').attr('src', source.dataset.lazySrcset);
								}
							})
					}


				});
		}


	})