实现图片懒加载（及优化相关）

全栈程序员站长

发布于 2022-07-22 13:12:06

1.2K0

发布于 2022-07-22 13:12:06

文章被收录于专栏：全栈程序员必看

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

目录
内容介绍
1、懒加载
2、预加载
一、效果展示
二、实现代码
三、优化相关

内容介绍

工作之余想要休闲一下（看-美-女-图），但是又觉得单纯休闲不利于自身进步，于是 ……

首先，简单说一下懒加载和预加载，两者都能提升用户体验。

1、懒加载

当客户端首屏不需要展示的图片，可以先不进行图片数据的请求，当图片的结构进入可视区域的时候，让这张图片进行显示监听scroll滚动，当滚动的距离 +首屏的高度 >元素距离浏览器顶端的高度值时，让图片进行显示。

2、预加载

幻灯片、相册等，可以使用图片预加载，将当前展示图片的前一张和后一张优先下载。初始化的时候获得图片的src之后为每一个元素提前添加图片的地址路径。保证在第二张图片显示的时候已经加载到页面当中.（应用于轮播、相册、幻灯片等图片需要进行切换显示的地方）。

一、效果展示

👇 👇 👇 👇 👇

图片懒加载演示视频

二、实现代码

<!DOCTYPE html>
<html lang="en">

<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">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>图片懒加载</title>
    <style> * { 
     margin: 0; padding: 0; } .img-wp { 
     width: 765px; margin: 0 auto; } </style>
</head>

<body>


    <div class="img-wp">
        <!-- 使用data-*属性存放图片路径 -->
        <!-- src 属性可为空，或放小图 -->
        <img src="" data-src="./img/1.jpeg" alt="" width="765" height="574">
        <img src="" data-src="./img/2.jpeg" alt="" width="765" height="574">
        <img src="" data-src="./img/3.jpeg" alt="" width="765" height="574">
        <img src="" data-src="./img/4.jpeg" alt="" width="765" height="574">
        <img src="" data-src="./img/5.jpeg" alt="" width="765" height="574">
        <img src="" data-src="./img/6.jpeg" alt="" width="765" height="574">
    </div>

    <script> ! function(window, document, $, undefined) { 
     // 页面滚动时触发 function lazyScroll() { 
     $('img').each(function(index, item) { 
     let bTop = $(this).offset().top; let scrollHeight = $(':root').scrollTop(); let screenHeight = window.innerHeight; // 滚动区域及可视范围进行判断 if ((scrollHeight + screenHeight) > bTop) { 
     $(this).attr('src', $(this).data('src')) } }) } // 页面加载完成时执行一次 lazyScroll() $(window).on('scroll', lazyScroll) }(window, document, jQuery) </script>
</body>

</html>

三、优化相关

以上代码案例仅作为简单实现，实际使用中可以进行封装和优化，列举几栗：

已经懒加载完成的元素添加指定class类名，防止重复监听
使用防抖函数，控制触发频率
使用getboundingClientRect或IntersectionObserver（性能较好，但是有兼容性问题）
jquery.lazyload.js

标签：JavaScript，jQuery，图片懒加载

更多演示案例，查看 案例演示

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年4月6，如有侵权请联系 cloudcommunity@tencent.com 删除

https

java

网络安全

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

https

java

网络安全

登录后参与评论

0 条评论

热度