likes
comments
collection
share

图片懒加载技术详解与实战教程

作者站长头像
站长
· 阅读数 62

引言

在当今快节奏的互联网环境中，页面加载速度是决定用户体验与留存的关键因素之一。特别是对于图像丰富的网页，大量的图片加载往往会拖慢页面初次呈现的时间。为解决这一挑战，图片懒加载技术应运而生，它能够显著提升页面响应速度，优化用户体验。本文将系统地介绍图片懒加载的概念、原理，并通过实际的代码示例，引导你掌握如何利用JavaScript实现这一优化策略。

一、图片懒加载基础

  • 定义：图片懒加载是一种延迟加载技术，即仅在图片即将进入用户视野时才开始加载，而非页面加载时立即加载所有图片。
  • 优势：减少首屏加载时间，节省流量，提升页面响应速度。

二、浏览器加载机制概览

  • DOM构建：浏览器解析HTML，构建文档对象模型(DOM)。
  • CSSOM构建：下载并解析CSS，构建CSS对象模型(CSSOM)。
  • 渲染流程：DOM与CSSOM合并成渲染树，进行布局与绘制。
  • 资源加载：图片等外部资源异步加载。

三、为何采用图片懒加载

  • 首屏加速：优先加载可视区域内容，快速呈现核心信息。
  • 节约资源：避免加载未查看的图片，节省用户流量。
  • 性能优化：减轻服务器压力，提高网站整体性能。

四、实现步骤与代码示例

HTML结构调整

首先，为图片标签使用data-src属性存储图片URL，而非传统的src属性。 因为传统的src属性在html加载的时候，会直接加载，不可控，如果在加载页面的时候同时加载上百张图片，不仅不会阻塞tcp/ip的数据传输，还会影响用户的体验。

对比一下data-src与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>
</head>
<body>
    
    <img  src="http://hbimg.huaban.com/d6beb51da15d69314038b6b79f56b7f6a57e2166137562-ErHeYF">
    <img  src="http://hbimg.huaban.com/e5df7a7e21cadf899be1c959d32d0ec0ad3c6ae9115241-Jpyztp">
    <img  src="http://hbimg.huaban.com/65d525a7b29a468c27d4ea61c0c6d47b0b3fc1ce15e986-FRa0vZ">
    <img  src="http://hbimg.huaban.com/b6220b7dcc6ff85d93118817ba7bab086290fda042f91-UjkM9z">
    <img  src="http://hbimg.huaban.com/666d8ccf68eb788d5dbb110d9d6afa1876f21a1e160da9-hF5UUE">
</body>
</html>

在这里放五张图片，直接使用src属性，会全部生成 图片懒加载技术详解与实战教程

如果使用data-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>
        * {
    margin: 0;
    padding: 0;
}
body{
    background-color: gray;
}
img{
    display: block;
    margin-bottom: 50px;
    width: 400px;
    height: 400px;
}
        </style>
</head>
<body>
    
    <img  data-src="http://hbimg.huaban.com/d6beb51da15d69314038b6b79f56b7f6a57e2166137562-ErHeYF">
    <img  data-src="http://hbimg.huaban.com/e5df7a7e21cadf899be1c959d32d0ec0ad3c6ae9115241-Jpyztp">
    <img  data-src="http://hbimg.huaban.com/65d525a7b29a468c27d4ea61c0c6d47b0b3fc1ce15e986-FRa0vZ">
    <img  data-src="http://hbimg.huaban.com/b6220b7dcc6ff85d93118817ba7bab086290fda042f91-UjkM9z">
    <img  data-src="http://hbimg.huaban.com/666d8ccf68eb788d5dbb110d9d6afa1876f21a1e160da9-hF5UUE">
</body>
</html>

就不会加载，这就是懒加载的关键，减少不必要的进程，降低服务器和页面的荷载。 图片懒加载技术详解与实战教程

JavaScript实现

  1. 获取图片元素
  2. 监听滚动事件
  3. 判断图片是否可视
  4. 动态加载图片 话不多说，直接上代码，如果有不清楚的部分可以借助ai来帮助理解方法和函数
const imgs = document.getElementsByTagName('img');
const num = imgs.length;
let n = 0;
document.addEventListener('DOMContentLoaded',()=>{
         loadImage()
 });
        
  function loadImage(){
      console.log('haha');//添加一个输出来查看函数的运行次数
      // 是否在可视区
      let screenHeight = document.documentElement.clientHeight;//一屏的高度
      //滚动条
      //不同浏览器的兼容性问题
      let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
       for(let i =0;i<num;i++){
         // console.log(imgs[i].offsetTop);
         if(imgs[i].offsetTop <screenHeight+scrollTop){
            //数据属性 
        //console.log(imgs[i].dataset.src,imgs[i].dataset.price);
            imgs[i].src = imgs[i].getAttribute('data-src');
             n = i + 1 ;
              if(n === num){
              window.removeEventListener('scroll',throttleLayLoad);
                    }
                }
            }
        }
        const throttleLayLoad = _.throttle(loadImage,300);
        window.addEventListener('scroll',throttleLayLoad);
  • 节流函数：这里使用了Lodash的_.throttle函数来限制loadVisibleImages函数的执行频率，避免滚动时频繁触发加载逻辑。如果不添加的话，在每一个单位时间就会计算一次

图片懒加载技术详解与实战教程 这是添加函数后的执行次数，有明显的减少，如果不满足还可以自己来设置执行的频率 图片懒加载技术详解与实战教程

结语

今天又学到了新知识，如果觉得有帮助的话，请各位友友点点赞，收藏一下，如果有哪里没有解释好的地方也请在评论区里指出，谢谢各位大佬的帮助。

转载自:https://juejin.cn/post/7379921204754874402
评论
请登录