懶加載 與 富文本編輯器 的 相愛相殺

最近攝影入魔，已經很久沒有在園里寫技術博文了。想想還是不能玩物喪志，誤了正業。在此分享之前在項目重構時遇到的一個技術小矛盾，希望對大家遇到類似問題時有所幫助。

lazyload

相信大家對“懶加載”都非常熟悉了，比如微信文章里的圖片、電商網站的產品詳情圖等等。而懶加載，用得最多的插件就莫過於 jquery.lazyload.js 了，示例如下

<img src="__PIMG__/loading.gif" data-original="__IMG__/1.jpg"  />
<script src="__PJS__/jquery.lazyload.js"></script>
<script>
$("img").lazyload({effect:"fadeIn"});
</script>

可以看到，img標簽與正常的圖片的並不相同，img的src屬性指向的是一個loading的加載圖，data-original屬性的才是真正的圖片的地址。

富文本編輯器

最常用的富文本編輯器莫過於 KindEditor，很完整明了。和博客園的文本編輯器差不多，也可以修改文本格式，上傳圖片，切換成源碼模式等等。

問題來了

這兩者有什么矛盾呢？后台編輯所使用的KindEditor上傳圖片等使用的img標簽是正常的src，而前台所顯示的時候img的src是loading圖。而且，在后台重構之前，這一段的頁面並非是可視化生成而是直接用HTML輸進去的，數據庫中的詳情頁的內容都是按lazyload的格式。所以在KindEditor中原來的圖片其實顯示不出來。難道就這樣放棄可視化編輯嗎？當然不能放棄。

方案一：前台和數據庫按原來的樣子，后台在編輯時把編輯器內的圖片顯示也用lazyload顯示出來，后台提交保存時用正則匹配把src替換成lazyload需要的樣子再入庫；

方案二：把數據庫里面的內容全部改了，改成正常的img標簽和src屬性；前台輸出后用js替換成符合lazyload所需要的格式。

方案三：數據庫原來的內容不改，但新的數據使用標准img標簽。后台編輯時，如果是lazyload的格式則用js把圖片替換成真實圖片，否則直接顯示；提交時，使用的是標准img標簽；前台顯示如果是標准img標簽，則用js修改成lazyload所需要的格式。

在衡量過程中，方案一的后台提交保存時用正則匹配修改成lazyload所需要的樣子時比較麻煩，這個正則寫起來相當有難度；方案二修改原來的數據庫中的數據也是因為這個正則匹配的問題而不采用。最后采用了方案三。

管理后台的顯示替換核心代碼如下，需要留意的是不只要替換可視化界面的顯示，還要重新生成里面的代碼框

<script>
$(document).ready(function(){
    //KindEditor里面的內容的一些數據兼容處理
    setTimeout( function(){
        var testF= $("iframe.ke-edit-iframe").contents().find("body");

        $( testF ).find("img").each(function(){
//            console.log( $(this).attr("data-original") );
            var lazyOriginal = $(this).attr("data-original");
            if( lazyOriginal ){
                $(this).attr("src", lazyOriginal ).removeAttr("data-ke-src").removeAttr("data-original");    //直接替換src為original並去除Kindeditor的緩存和原來的data-original
            }
        });
        
        $("span[data-name=source]").trigger("click");    //要點擊了顯示源按鈕，textarea才會有值
        $("textarea.ke-edit-textarea").val( $(testF).html() );
//            console.log( $("textarea.ke-edit-textarea").val() );
        $("span[data-name=source]").trigger("click");
            
    }, 500);
    
});    
</script>

 

WAP版前端顯示頁面的產品詳情核心代碼如下

<!--圖文詳情-->
    <div id="CMSinfo">
        {$proData["CMSinfo"]}
    </div>
    <style>
        #CMSinfo ul, #CMSinfo li {
            margin: 0; padding: 0; list-style: none;
        }
        #CMSinfo img {
            width: 100%;
            display: block;
        }
    </style>
    <script src="__PJS__/jquery.lazyload.js"></script>
    <script>
        $(document).ready(function(){
            //對於要懶加載的圖，用JS方式把img的源地址改變
            $("#CMSinfo img").each(function(){
                if( !$(this).attr("data-original") ){
                    $(this).attr("data-original", $(this).attr("src") ).attr("src", "__PIMG__/loading.gif");
                }
            });
            
            $("#CMSinfo img").lazyload();
        });
    </script>
    <!--圖文詳情結束-->