在#content內(nèi)是后端渲染的數(shù)據(jù),img使用默認屬性src,利用.each替換src為loadding圖,圖片實際上已經(jīng)完成原有數(shù)據(jù)(p1.jpg/p2.jpg/p3.jpg)的請求,后才被替換成loading圖片,懶加載的意義就沒有了。如何在不修改后臺數(shù)據(jù)的情況下,攔截圖片src,實現(xiàn)懶加載呢?<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>
后臺渲染的頁面,圖片資源使用src屬性的情況下,如何實現(xiàn)圖片懶加載?
躍然一笑
2018-12-11 17:15:43