對於富文本編輯器中使用lazyload圖片懶加載

使用lazyload.js圖片懶加載的作用是給用戶一個好的瀏覽體驗,同時對服務器減輕了壓力,當用戶瀏覽到該圖片的時候再對圖片進行加載,項目中使用lazyload的時候需要將圖片加入data-orginal的屬性表明圖片的路徑,但是目前在做的項目中使用的是用戶自己編輯的內容,不能對這些內容做修改,於是只能是在瀏覽的時候用js多加一段操作實現這個功能了,

在文檔內容全部寫入到頁面之后,執行一段js

 

$(".content img").each(function (index, el) {
var oImgSrc = $(this).attr("src");
$(this).attr("src", "").attr("data-original", function () {
return oImgSrc;
}); //判斷src是否為空，為空添加加載的loading背景圖
if ($(this).attr("src").length == 0) {
$(this).parent().css({
"background": "url(images/loading.gif) no-repeat center center",
"background-size": "20px 20px"
});
} else {
$(this).parent().removeAttr("style");
};
});

該段js的功能就是在將該內容插入到html里面之后,將所有的圖片標簽加入data-orginal屬性,同時對他的父標簽添加loading動畫,最后在調用lazyload的方法,就能實現完整的功能了.