lazyload

可以看到，img标签与正常的图片的并不相同，img的src属性指向的是一个loading的加载图，data-original属性的才是真正的图片的地址。

最常用的富文本编辑器莫过于 KindEditor，很完整明了。和博客园的文本编辑器差不多，也可以修改文本格式，上传图片，切换成源码模式等等。

这两者有什么矛盾呢？后台编辑所使用的KindEditor上传图片等使用的img标签是正常的src，而前台所显示的时候img的src是loading图。而且，在后台重构之前，这一段的页面并非是可视化生成而是直接用HTML输进去的，数据库中的详情页的内容都是按lazyload的格式。所以在KindEditor中原来的图片其实显示不出来。难道就这样放弃可视化编辑吗？当然不能放弃。

方案二：把数据库里面的内容全部改了，改成正常的img标签和src属性；前台输出后用js替换成符合lazyload所需要的格式。

在衡量过程中，方案一的后台提交保存时用正则匹配修改成lazyload所需要的样子时比较麻烦，这个正则写起来相当有难度；方案二修改原来的数据库中的数据也是因为这个正则匹配的问题而不采用。最后采用了方案三。

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