1. 程式人生 > >對於富文本編輯器中使用lazyload圖片懶加載

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

size ack 20px 功能 div data html back dex

使用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的方法,就能實現完整的功能了.

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