ueditor(富文本框)生成HTML，对里面img进行滑动加载步骤

楼主^#

更多发布于：2018-10-11 10:25

1.首先把阻止img图片加载,我用的方法是把img标签里面的src利用正则替换为data-src。

this.detaildata.content = data.data.content.replace(/src/g,'data-src');

2.封装函数判断是否出现在可视窗口(getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。)

ImgisShow(img){
          let imgposition = img.getBoundingClientRect();
          return imgposition.top &lt;= (document.documentElement.clientHeight || window.innerHeight);
        }

3.判断图片是否加载未加载则执行加载(updated()是对图片做的某些限制，解决了在图片加载出来之前函数执行问题，避免了对图片做的样式失效问题。)

loadImg(){
           let imgList = document.getElementById('detailcontent').getElementsByTagName('img');
           for(let i = 0;i&lt; imgList.length;i++) {
             if(this.ImgisShow(imgList[i])) {
               if (imgList[i].getAttribute('data-src')) {
                 imgList[i].src = imgList[i].getAttribute('data-src');
                 imgList[i].classList.remove("data-src");
                 this.updated();
               }
             }
           }
         }

喜欢1

ueditor(富文本框)生成HTML，对里面img进行滑动加载步骤

最新喜欢：