懒惰在手机上加载图片

时间:2016-05-10 09:09:20

标签: javascript jquery lazy-loading jquery-lazyload

我正在使用这个延迟加载代码。

JS CODE:

$(window).on('scroll touchmove', function(){
  if( $('.touch').length) {
    var images = $('.theme-slider img[data-lazy]');
    images.each(function(index){
        if(isElementVisible(this)) {
            $(this).attr('src', $(this).attr('data-lazy'));
            $(this).removeAttr('data-lazy');
        }
    })
    if(images.length == 0) { 
        $(window).off('scroll touchmove');
    }
  }
});


// Checking if an image is within the viewport
function isElementVisible(el){ 
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 && 
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight) &&
    rect.right <= (window.innerWidth)   
  );    
}

当我在水平滚动时如果图像已经进入视口但它没有加载我的问题是在iPhone上,我必须向前和向后滚动直到它工作。 我有什么想法可以解决它吗?

0 个答案:

没有答案