Das verzögerte Laden von Bildern ist prägnant

1. Einleitung

Da Vue ein Einzelseitenprogramm ist, werden im Allgemeinen alle von Ajax angeforderten Daten beim Aufrufen der Seite geladen. Um dieses Phänomen zu lösen, wird daher die Methode des verzögerten Ladens von Bildern verwendet, um die Leistung zu verbessern.

2. Das Prinzip der Implementierung von Lazy Loading

1. Geben Sie die Adresse des Bildes in das Attribut „data-set“ ein. Da sich das Bild nicht in src befindet, wird die http-Anfrage nicht gesendet. 2. Vergleichen Sie den Abstand (Y) des Bildes zur
gesamten Seite mit „ offsetTop' und der Seitengleitabstand (X) 'scrollTop' + Größe des sichtbaren Bereichs des Browsers (Z) 'clientHeight', Y ist kleiner als die Summe der beiden 'offsetTop' < 'scrollTop'
+ 'clientHeight'
3. Die Das Bild wird angezeigt und das Datensatzattribut durch das src-Attribut ersetzen

documentElement 对应的是 html 标签，而 body 对应的是 body 标签
1.var showViewH = document.documentElement.clientHeight  //获取可视区域的高度
2.var scrollH = document.body.scrollTop || document.documentElement.scrollTop//获取滚动的(高度兼容性写法)
3.imgs[i].offsetTop //当前图片到其上级层顶部的距离

3. Vue

Das verzögerte Laden von Bildern in Vue ist sehr einfach

Plugin herunterladen

npm install vue-lazyload --save 或 yarn add  vue-lazyload

main.js führt Plug-Ins ein

import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'
 
Vue.use(VueLazyLoad)   
或
Vue.use(VueLazyload, {
    
    
  preLoad: 1.3, // 提前加载高度（数字 1 表示 1 屏的高度） 默认值:1.3
  error: 'dist/error.png',     // 当加载图片失败的时候
  loading: 'dist/loading.gif', // 图片加载状态下显示的图片
  attempt: 3   //  加载错误后最大尝试次数 默认值:3
})

Komponentenverwendung

1.img        v-lazy="'/static/img/product/' + productshow1"   
// productshow1为路径地址，直接将变量写在data中使用 data: () =>{productshow1:"productshow1.png" }

2.背景图片  v-lazy:backgroundImage = "showMessage.imageUrl"  
//showMessage.imageUrl为变量名，图片的地址

4.jquery

jquery实现主要是依赖了lazyload.js

Plug-Ins vorstellen

<script src="jquery.js" type="text/javascript"></script> 
<script src="js/jquery.lazyload.js" type="text/javascript"></script> 

verwenden

// 最简单的使用，不带参数
$('img').lazyload();
 
 // 带参数(配置对象)，下面配置对象中的各个属性值都是默认的
$('img').lazyload({
    
    
  threshold : 0,  //图片距离可视窗口的距离为多少px开始加载图片
  failure_limit : 3,  //img加载失败到第4张开始停止加载图片
  event : “scroll”,  //触发事件
  effect : “show”,   //显示方式
  container : window,  //容器
  data_attribute : “original”,  //属性
  skip_invisible : true,   //不进行加载隐藏的图片
  appear : null,  //在img触发appear事件时执行的回调
  load : null,   //在img触发load事件时执行的回调
placeholder:"data:image/png;base64,,,,,"   // 图片占位符
});

5. Einheimisch

Rufen Sie alle erforderlichen Höhen und geladenen Bilder ab und ändern Sie das Datensatzattribut, um verzögertes Laden zu implementieren

HTML-Teil

<img data-set ="img/one.jpg" src ="">
<img data-set ="img/two.jpg" src ="">
<img data-set ="img/three.jpg" src ="">
<img data-set ="img/four.jpg" src ="">
<img data-set ="img/five.jpg" src ="">

JavaScript-Teil

<script type="text/javascript>
var imgs = document.querySelectorAll("img");  //获取所有的img元素
window.onscroll = function(){
    
         //定义触发事件
    var showViewH = document.documentElement.clientHeight;  //获取可视区域的高度
    //获取滚动的高度（兼容性写法）
    var scrollH = document.body.scrollTop || document.documentElement.scrollTop;  
    for(var i =0 ; i<imgs.length;i ++){
    
    
        //判断图片到页面的高度与可视高度和滑动高度的大小
         if (imgs[i].offsetTop < showViewH + scrollH ) {
    
      
                   if (imgs[i].getAttribute('src') == '') {
    
    
                       imgs[i].src = imgs[i].getAttribute('data-set');
                   }
       }
}
</script>