Skip to content

Instantly share code, notes, and snippets.

@TrywaR
Created May 3, 2019 00:12
Show Gist options
  • Save TrywaR/1bef4c20208db13a4020d8862a15a0fd to your computer and use it in GitHub Desktop.
Save TrywaR/1bef4c20208db13a4020d8862a15a0fd to your computer and use it in GitHub Desktop.
Ленивая подгрузка картинок в зависимости от того видно ли блок с ними пользователю, можно использовать в связке с https://modernizr.com/download?webp-webpalpha-webpanimation-setclasses чтобы если браузер поддерживает webp картинки подгружались в этом формате
/*_____________________ VeryLazy ______________________*/
function VeryLazy(){
$(document).find('.home ._block').each(function(index, element){
if ($(document).scrollTop() > $(this).offset().top - $(window).height()){
$(this).addClass('active').find('img[data-src]').each(function() {
if ($('html').hasClass('webp') && $(this).data().webp)
$(this).attr('src', $(this).data().webp)
else
$(this).attr('src', $(this).data().src)
})
}
})
}
$(document).scroll(function(){
VeryLazy()
})
VeryLazy()
/*///////////////////////////////////////////////////////*/
@TrywaR
Copy link
Author

TrywaR commented May 3, 2019

Пример html
<img data-webp="img.webp" data-src="img.png" alt="VaeryLazyImg">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment