后台渲染的页面，图片资源使用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>