后台渲染的页面，图片资源使用src属性的情况下，如何实现图片懒加载？

Question

在#content内是后端渲染的数据，img使用默认属性src，利用.each替换src为loadding图，图片实际上已经完成原有数据(p1.jpg/p2.jpg/p3.jpg)的请求，后才被替换成loading图片，懒加载的意义就没有了。如何在不修改后台数据的情况下，拦截图片src，实现懒加载呢？

<div id="content">
    <img src="images/p1.jpg">
    <img src="images/p2.jpg">
    <img src="images/p3.jpg">
</div>

<script>
    $(function(){
        $("#content img").each(function(){
            if( !$(this).attr("data-original") ){
                $(this).attr("data-original", $(this).attr("src") ).attr("src", "img/loading.gif");
            }
        });
        
        $("#content img").lazyload();
    });
</script>

Answer 1

img默认的src不要写实际图片地址，而是loading地址。

<img src="loading.gif"  id='img'/>
<script>
    var img=new Image();
    var add="http://www.xxx.com/xxxx.jpg"
    img.src=add    //这3句将图片缓存在浏览器中。
    img.onload = function(){    //真实图片加载完后将src的loading地址替换为真实地址
        document.getElementById('img').setAttribute('src',add)
    }
</script>

懒加载的目的不是为了拦截图片的src，而是防止图片未加载完成时出现的空白。
另外，还有一种图片的懒加载是通过滑动滚动条实现，原理也是开始src指向loading，当滚动到一定高度时将src指向真实地址，实现加速页面加载，节约流量的目的。