懒加载 与 富文本编辑器 的 相爱相杀

最近摄影入魔，已经很久没有在园里写技术博文了。想想还是不能玩物丧志，误了正业。在此分享之前在项目重构时遇到的一个技术小矛盾，希望对大家遇到类似问题时有所帮助。

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>
    <!--图文详情结束-->