原生js实现图片懒加载
图片懒加载的原理:img标签的src属性暂时先改成一个自定义属性,这样页面就不会去加载图片,当img标签所在区域进入屏幕可视区域后,从存放图片路径的自定义属性中获取图片地址,并动态的设置给对应img标签的src属性,这样浏览器就会自动帮助我们去请求对应的图片资源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
li {
height: 900px;
}
img {
display: block;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img data-src="images/轮播图1.jpg"></li>
<li><img data-src="images/轮播图2.jpg"></li>
<li><img data-src="images/轮播图3.jpg"></li>
<li><img data-src="images/轮播图4.jpg"></li>
</ul>
</div>
<script>
// getBoundingClientRect用于获得页面中某个元素的上下左右分别相对浏览器视窗的位置
window.onload = imgonLoad
function imgonLoad() {
let img = document.querySelectorAll("img");
img.forEach(function (value, index, array) {
// 如果图片的上边到可视窗口的距离小于窗口高度(也就是图片就进入了可视区域了)
if (value.getBoundingClientRect().top < window.innerHeight) {
value.setAttribute('src', value.dataset.src)
}
})
}
// 滚动条滚动调用图片加载函数
window.onscroll = function () {
setTimeout(imgonLoad, 2000)
}
</script>
</body>
</html>
图片懒加载插件:
- jquery.lazyload
- vue-lazyload
vue-lazyload插件的使用:
vue-lazyload官网详解:https://github.com/hilongjw/vue-lazyload
-
安装:
npm install vue-lazyload --save-dev
-
main.js中全局引入:
import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad, { preLoad: 1, error: require('./assets/img/error.jpg'), loading: require('./assets/img/loading.jpg'), attempt: 2, })
-
页面中使用:
<img v-lazy="require('./assets/product_1@1x.e059b93.png')" :key="1" alt="" />
:key=" "必须要加,否则就会出现页面刷新其他内容都刷新了,但是只有图片不刷新的情况 ,因为key可能相同所以页面不会更新
-
img中使用图片懒加载,v-lazy代替v-bind:src
-
背景图中使用图片懒加载,v-lazy:background-image = " "
-
img加载时有三种状态:
<style> img[lazy=loading] { /*your style here*/ } img[lazy=error] { /*your style here*/ } img[lazy=loaded] { /*your style here*/ } </style>
万能懒加载插件:vue-view-lazy
实现图片或者其他资源进入可视区域后再加载
-
安装:
npm install --save-dev vue-view-lazy
-
main.js中全局引入:
import vView from 'vue-view-lazy' Vue.use(vView,{ error:'./assets/images/loading.png', loading:'./assets/images/loading.gif', });
-
懒加载图片
<template> <ul id='img'> <li class="in" v-for="(item,i) in imgs" :key="i"> <img src="#" alt="图片" v-view-lazy="item.src"> </li> </ul> </template> <script> export default { data () { return { imgs:[ {src:'../../static/images/img1.jpg'}, {src:'../../static/images/img2.png'}, {src:'../../static/images/img2.jpg'}, {src:'../../static/images/img3.jpg'}, {src:'../../static/images/img4.jpg'}, {src:'../../static/images/img5.jpeg'}, ] } }, mounted(){ }, } </script> <style scoped> </style>
-
懒加载其他资源
@model自定义事件是在该元素在第一次出现在可视区域内时触发的方法
也可以写成 v-view-lazy="(e) => method(e,arg)"
<div class="icons" v-view-lazy @model="(e) => animate(e)"> <svg-icon icon-class="company_ic_vision" class-name="icon"></svg-icon> <div>我是一个好人</div> </div> <script> export default { methods:{ //e就是绑定事件的元素 animate(e) { e.style.opacity = 1; e.style.transform = "translateY(0)"; } } } </script>
vue-lazy-render插件
用于vue组件的延迟渲染,改善初次进入页面或者数据量较大的页面操作时出现卡顿的情况
-
安装:
npm install vue-lazy-render
-
main.js中全局引入:
import LazyRender from 'vue-lazy-render' Vue.use(LazyRender)
-
在页面中使用:
<lazy-render :data="myArray" :time="300" :limit="50" track-by-data> <my-component :data="myArray"></my-component> <div slot="tip">this is a tip</div> </lazy-render>
属性 描述 type default required time 多长时间后开始渲染组件 Number 10 false immediately 是否立即开启延迟渲染,vue-lazy-render组件会在路由切换时,会进行一次延迟渲染,如果在同一个路由中需经常对某个组件进行延迟渲染,可以将immediately由false设为true,就会马上开启一次延迟渲染 Boolean — false data 如果需要延迟加载的组件是由数组渲染的,可以将数据的数据prop进vue-lazy-render组件,组件会根据配置监测数组变化,决定开启延迟加载的时机 array — false trackByData 是否根据data的变化来开启延迟加载,如果设为true,需将data prop进来,并且路由切换时不会再进行延迟渲染 Boolean — false limit 在数据超过多少后才开启延迟渲染,需要data和将trackByData设为true Number 30 false maskClass 等待渲染时的遮罩层样式 String — false tip 等待渲染时的提示文字(支持直接写html) String 正在渲染,请稍候 false 事件名 描述 参数 loaded 延迟渲染完成后的回调 —