javascript - JS更改img src与真实链接以进行延迟加载

Question

我有以下 js 函数，仅在 View 中通过更改 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'); 
              }
        });
    })

我相信，无需检查窗口高度。只需从顶部检查当前滚动位置和图像顶部位置即可。如果它(图像顶部位置)小于当前滚动，则加载图像。

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