不会健身的程序员
不是好作家

项目总结-百度编辑器(2):显示图片延迟加载

用百度编辑器ueditor做富文本编辑器,在显示内容的时候需要对内容的图片进行延迟加载,其中有2点比较重要,1、需要每张图片都有width和height宽高属性进行占位,这样延迟加载的时候内容的高度基本不会变,2、需要把图片的src属性替换成另外一个属性进行图片延迟加载。下面以服务器端java为例显示如何进行图片延迟加载。小林的做法如下:

在服务器端

在获取存储的正文之后用正则表达式批量替换内容

content = content.replaceAll("<img(.*?)src=(.*?)>","<img$1 class='lazy' data-original=$2>");

在前端

图片延迟加载

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
<script src="//cdn.bootcss.com/jquery.lazyload/1.9.1/jquery.lazyload.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function(){
    //圖片延遲加載
    $("img[data-original]").lazyload({effect: "fadeIn",threshold : 20,load:function(self, elements_left){
        $(this).removeAttr("data-original");
    }});
})
</script>
赞(0)
转载请注明出处:林俊龙博客 » 项目总结-百度编辑器(2):显示图片延迟加载

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    请问有没有demo

    小好人lucky 3年前 (2016-09-07) 来自天朝的朋友 未知浏览器 Unknow Os 回复

年年岁岁花相识,岁岁年年人不同

给我留言网站地图

谢主隆恩

支付宝扫一扫打赏

微信扫一扫打赏