Question

我有以下js函数，只有在视图中通过更改src属性才能加载图像。

 <img src="" r_src="/myimage.png" />

 jQuery(window).scroll(function(){
        jQuery('img[r_src]').each(function(i){
          var rh = jQuery(this);
          if(rh.position().top > (jQuery(window).scrollTop()+jQuery(window).height())){
                rh.attr('src', rh.attr('r_src'));
                rh.removeAttr('r_src'); 
              }
        });
    })

它没有像我预期的那样工作。

图片显示在页面顶部，我不确定这是否是代码无效的原因。

我应该做出什么改变？

Answer 1

希望低于逻辑可能有所帮助：

<img src="" r_src="/myimage.png" />

 jQuery(window).scroll(function(){
        jQuery('img[r_src]').each(function(i){
          var rh = jQuery(this);
          if(rh.position().top < (jQuery(window).scrollTop())){
                rh.attr('src', rh.attr('r_src'));
                rh.removeAttr('r_src'); 
              }
        });
    })

我相信，无需检查窗户高度。只需从顶部和图像顶部位置检查当前滚动位置。如果它（图像顶部位置）小于当前滚动，只需加载图像。

希望这可以帮助你破解逻辑。

JS使用真实链接更改img src以进行延迟加载

1 个答案: