实现图片懒加载的三种方式(前端路由懒加载原理)

全栈程序员-站长 • 2022年4月16日上午8:00 • 未分类 • 阅读 88

大家好，又见面了，我是你们的朋友全栈君。

1.什么是图片懒加载

图片懒加载就是鼠标滑动到哪里，图片加载到哪里。总的来说，一般页面打开，会同时加载页面所有的图片，如果页面的图片请求太多会造成很卡很慢的现象，为了避免这一现象，利用懒加载图片的方法，提高性能（典型：淘宝）

2. 实现图片懒加载的原理

图片懒加载的实现原理：将图片的地址放在data-set属性中，由于图片并没有在src中，并不会发送http请求。比较图片到整个页面距离（Y）和页面滑动的距离（X） + 浏览器可视区域的大小(Z) ，Y小于两者之和，则图片就显示出来，将图片的data-set属性换为src属性

实现图片懒加载的三种方式(前端路由懒加载原理)

3. Vue的图片懒加载实现

Vue的图片懒加载很简单

（1）下载插件 npm install vue-lazyload –save 或 yarn add vue-lazyload

（2） main.js 引入插件

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
})

(3)在组件中使用：

对于img

v-lazy=”‘/static/img/product/’ + productshow1″

// productshow1为路径地址，直接将变量写在data中使用 data: () =>{productshow1:”productshow1.png” }

对于背景图片

v-lazy:backgroundImage = “showMessage.imageUrl” //showMessage.imageUrl为变量名，图片的地址

4.jquery 实现图片懒加载

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

（1）引入插件

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

（2）使用

// 最简单的使用，不带参数
$('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.原生js实现图片懒加载

获取到所有需要用到的高度，和加载的图片，修该data-set 属性实现懒加载

html部分

<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部分

<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>

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/128343.html原文链接：https://javaforall.net