jq 图片懒加载 + Vue-Lazyload

阿金要当大魔王~~

已于 2024-02-26 10:46:24 修改

阅读量400

点赞数 6

分类专栏： vue 问题面试啊文章标签：前端

于 2024-02-19 14:01:50 首次发布

本文链接：https://blog.csdn.net/weixin_68266812/article/details/136168893

版权

vue 问题同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

面试啊

17 篇文章 0 订阅

订阅专栏

大型网站如常用的淘宝，京东等页面，需要展示大量的商品图片信息，如果打开网页时让所有图片一次性加载完成，需要处理很多次网络请求，等待加载时间比较长，用户体验感很差。

有一种常用的解决方式是：随着滚动动态加载，即图片的惰性加载。视图之外的图片默认不加载，随着页面的滚动，图片进入了显示的范围，则触发图片的加载显示。

优点：页面加载速度快，用户体验感更好且节省流量

初始化时，图片标签的src不能是真实的图片地址，也不可以是空地址或者坏地址(会出现图片加载失败的图标)。初始化的时候，可以设置图片的src是某一个小型图片。例如一张1px*1px的透明图片。由于所有图片都使用这一张图片，只会发送一次请求，不会增加性能负担。
将图片的真实路径绑定给一个自定义属性，例如data-url。注意：页面的img元素，如果没有src属性，浏览器就不会发出请求去下载图片

如图：参考

方法一 jq原生图片懒加载

<!DOCTYPE html>
<html lang="zh-cn">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>

    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/QQ截图20230831185438.png" height="265" alt=""></p>
    <p><img data-url="./assets/QQ截图20230831185438.png" height="265" alt=""></p>
    <p><img data-url="./assets/QQ截图20230831185438.png" height="265" alt=""></p>
    <p><img data-url="./assets/QQ截图20230831185438.png" height="265" alt=""></p>
    <p><img data-url="./assets/QQ截图20230831185438.png" height="265" alt=""></p>
    <p><img data-url="./assets/QQ截图20230831185438.png" height="265" alt=""></p>
    <p><img data-url="./assets/QQ截图20230831185438.png" height="265" alt=""></p>
    <p><img data-url="./assets/QQ截图20230831185438.png" height="265" alt=""></p>
    <p><img data-url="./assets/QQ截图20230831185438.png" height="265" alt=""></p>
    <p><img data-url="./assets/QQ截图20230831185438.png" height="265" alt=""></p>
    <p><img data-url="./assets/QQ截图20230831185438.png" height="265" alt=""></p>
    <p><img data-url="./assets/QQ截图20230831185438.png" height="265" alt=""></p>
    <p><img data-url="./assets/QQ截图20230831185438.png" height="265" alt=""></p>
    <p><img data-url="./assets/QQ截图20230831185438.png" height="265" alt=""></p>
    <p><img data-url="./assets/QQ截图20230831185438.png" height="265" alt=""></p>
    <p><img data-url="./assets/QQ截图20230831185438.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/www.png" height="265" alt=""></p>
    <p><img data-url="./assets/www.png" height="265" alt=""></p>
    <p><img data-url="./assets/www.png" height="265" alt=""></p>
    <p><img data-url="./assets/www.png" height="265" alt=""></p>
    <p><img data-url="./assets/www.png" height="265" alt=""></p>
    <p><img data-url="./assets/www.png" height="265" alt=""></p>
    <p><img data-url="./assets/www.png" height="265" alt=""></p>
    <p><img data-url="./assets/www.png" height="265" alt=""></p>
    <p><img data-url="./assets/www.png" height="265" alt=""></p>
    <p><img data-url="./assets/www.png" height="265" alt=""></p>
    <p><img data-url="./assets/www.png" height="265" alt=""></p>
    <p><img data-url="./assets/www.png" height="265" alt=""></p>
    <p><img data-url="./assets/www.png" height="265" alt=""></p>
    <p><img data-url="./assets/www.png" height="265" alt=""></p>
    <p><img data-url="./assets/www.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
    <p><img data-url="./assets/logo.png" height="265" alt=""></p>
 
 
    <script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.min.js"></script>
 
 
    <script>
        // 先调用，保证可视区域的图片显示
        lazy();
        function lazy() {
            var imgS = Array.from($('img'));   // 获取页面 img 元素数组
            // console.log(imgS)
            var imgL = $('img').length;  // 获取页面 img 元素数量
            // console.log(imgL)
            var seeHeight = $(window).height();  // 获取页面 可视区域高度
            // console.log(seeHeight)
            var scrollT = $(document).scrollTop();   // 获取页面滚出 高度
            // console.log(scrollT)
            // 开始遍历 这个数组
            for (var i = 0; i < imgL; i++) {
                // console.log($(imgS[i]).offset().top + "  /")
                // console.log(seeHeight + scrollT)
                // 如果当前元素 出现在可视区域后 
                if ($(imgS[i]).offset().top < seeHeight + scrollT) {
                    //如果 当前自定义的 url 不为空
                    if ($(imgS[i]).attr("data-url") !== "undefined") {
                        // 把自定义属性地址 赋值给 img.src 
                        $(imgS[i]).attr("src", $(imgS[i]).attr("data-url"))
                    }
                }
            }
        }
 
    // 用户频繁操作 scroll  不免造成页面性能不佳 此刻当然需要配合 节流 使页面性能更加优化
 
        function throttle(fn, delay) {  // 定义的参数函数和延迟时间
            var begin = new Date();
            return function () {
                var curtimer = new Date();
                var contxt = this,
                    args = arguments;
                if (curtimer - begin > delay) {  // 时间间隔 > 定义时间 才执行
                    fn.apply(contxt, args);
                    begin = curtimer;
                }
            }
        }
        $(document).scroll(throttle(lazy, 100)); // 滚动时间 在100ms 内只执行一次
    </script>
</body>
 
</html>

图片懒加载的原理--三种方法实现_图片懒加载的实现原理-CSDN博客

方法二 vue-lazyload 安装插件安装

Vue-Lazyload官网： vue-lazyload - npm

Api文档: IntersectionObserver API 使用教程 - 阮一峰的网络日志 (ruanyifeng.com)

安装

npm install vue-lazyload --save

# 或者

yarn add vue-lazyload

main.js

import Vue from 'vue'  
import VueLazyload from 'vue-lazyload'  
  
// 配置项  
const options = {  
  preLoad: 1.3,  
  error: 'dist/error.png', // 图片加载失败时显示的图片  
  loading: 'dist/loading.gif', // 图片加载时显示的图片  
  attempt: 1 // 尝试加载次数  
}  
  
// 使用插件  
Vue.use(VueLazyload, options)

页面

<template>  
  <div>  
    <img v-lazy="imgUrl" />  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      imgUrl: 'path/to/your/image.jpg'  
    }  
  }  
}  
</script>

前端必会的图片懒加载(三种方式)_javascript技巧_脚本之家 (jb51.net)

阿金要当大魔王~~

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
jq 图片懒加载 + Vue-Lazyload

大型网站如常用的淘宝，京东等页面，需要展示大量的商品图片信息，如果打开网页时让所有图片一次性加载完成，需要处理很多次网络请求，等待加载时间比较长，用户体验感很差。初始化时，图片标签的src不能是真实的图片地址，也不可以是空地址或者坏地址(会出现图片加载失败的图标)。初始化的时候，可以设置图片的src是某一个小型图片。例如一张1px*1px的透明图片。由于所有图片都使用这一张图片，只会发送一次请求，不会增加性能负担。将图片的真实路径绑定给一个自定义属性，例如data-url。
复制链接

扫一扫