各种懒加载！！！一定有你想要的

最新推荐文章于 2023-06-14 10:09:46 发布

十里不故梦

最新推荐文章于 2023-06-14 10:09:46 发布

阅读量255

点赞数 1

分类专栏：懒加载文章标签：前端 vue.js vue

本文链接：https://blog.csdn.net/weixin_53430951/article/details/111243159

版权

懒加载专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何使用原生JavaScript和Vue.js实现图片懒加载功能，详细解析了懒加载的原理，并提供了相关代码示例。通过监听滚动事件，当图片进入视口时动态设置src属性加载图片，从而提高网页性能。此外，还提及了vue-lazyload和vue-view-lazy这两个Vue插件，用于更便捷地实现图片及其他资源的懒加载，减少页面初次加载时的压力。

摘要由CSDN通过智能技术生成

原生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	延迟渲染完成后的回调	—

十里不故梦

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
各种懒加载！！！一定有你想要的

原生js实现图片懒加载图片懒加载的原理：img标签的src属性暂时先改成一个自定义属性，这样页面就不会去加载图片，当img标签所在区域进入屏幕可视区域后，从存放图片路径的自定义属性中获取图片地址，并动态的设置给对应img标签的src属性，这样浏览器就会自动帮助我们去请求对应的图片资源<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="
复制链接

扫一扫

专栏目录