解决懒加载与富文本(ueditor为例)的冲突问题

常用的懒加载插件:jquery.lazyload.js,该插件的使用格式如下:

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

可以看到实际上data-original才是真正的图片地址。
使用ueditor生成的内容里,图片地址都会直接赋值在src上,为了能够使用lazyload,可以使用js方法在文件dom解释完毕后将富文本里的图片元素格式改为lazyload格式。代码如下:

<div class="Text">
     <div class="Info">ueditor contentdiv>
div>
<script src="/js/jquery.min.js">script>
<script src="/js/jquery.lazyload.js">script>
<script>
$(document).ready(function(){
   $(".Text img").each(function(){
      if( !$(this).attr("data-original") ){
         $(this).attr("data-original", $(this).attr("src")).attr("src", "/images/loading.gif");}
           //将src赋值到data-original,src赋值为预先准备的loding.gif
            });
         $(".Text img").lazyload();
        });
script>

你可能感兴趣的:(前端)