图片的懒加载和预加载

最新推荐文章于 2024-07-07 18:28:23 发布

@Demi

最新推荐文章于 2024-07-07 18:28:23 发布

阅读量1.2k

点赞数 3

分类专栏： JavaScript 文章标签：懒加载预加载性能优化

本文链接：https://blog.csdn.net/qq_38128179/article/details/108795558

版权

JavaScript 专栏收录该内容

61 篇文章 15 订阅

订阅专栏

一、懒加载

【1.1】什么是懒加载？

懒加载也就是延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

【1.2】为什么要懒加载？

当很多页面，内容很丰富，页面很长，图片较多的时候。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载所有图片，等待时间很长，用户难免会心生抱怨，这就严重影响用户体验。

【1.3】懒加载的原理

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把真正的路径存在元素的“data-src”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；

【1.4】懒加载的优点

页面加载速度快、可以减轻服务器的压力、节约了流量，用户体验好

【1.5】懒加载实现方式

方法一：纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.

方法二：条件加载，符合某些条件，或触发了某些事件才开始异步下载。

方法三：可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

<!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="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <title>Document</title>
  <style>
    .image-item {
      display: block;
      margin-bottom: 50px;
      /* 一定记得设置图片高度 */
      height: 200px; 
    }
  </style>
</head>

<body>
  <div class="wrap">
    <img class="image-item" src="" data-src="images/1.jpg" alt="" />
    <img class="image-item" src="" data-src="images/2.jpg" alt="" />
    <img class="image-item" src="" data-src="images/3.jpg" alt="" />
    <img class="image-item" src="" data-src="images/4.jpg" alt="" />
    <img class="image-item" src="" data-src="images/5.jpg" alt="" />
    <img class="image-item" src="" data-src="images/6.jpg" alt="" />
    <img class="image-item" src="" data-src="images/7.jpg" alt="" />
    <img class="image-item" src="" data-src="images/8.jpg" alt="" />
    <img class="image-item" src="" data-src="images/9.jpg" alt="" />
    <img class="image-item" src="" data-src="images/10.jpg" alt="" />
  </div>

  <script>
    // 首先获得页面当中所有的图片
    let img = document.getElementsByTagName("img");

    //存储图片加裁到的位置，避免每次都从第一 张图片开始遍历
    let n = 0;

    //页面载入完毕加载可视区域内的图片
    lazyload();

    //注册滚动条滚动事件
    window.onscroll = lazyload;

    //监听页面滚动事件
    function lazyload() {

      //可见区域高度
      let seeHeight = document.documentElement.clientHeight;

      /*滚动条距离顶部高度
      * Chrome: document.body.scrollTop
      * FF: document.documentElement.scrollTop
      **/
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

      for (let i = n; i < img.length; i++) {
        //  当前图片相对于页面顶部的距离 <= 可视区域+滚动条距离距离顶部的距离
        if (img[i].offsetTop < seeHeight + scrollTop - 100) {
          //将img[i]的src设置 成img[i]的data-src
          if (img[i].getAttribute("src") == "") {
            img[i].src = img[i].getAttribute("data-src");
            n = i + 1;
          }
        }
      }
    }
  </script>
</body>

</html>

二、预加载

【2.1】什么是预加载？

提前加载图片，当用户需要查看时可直接从本地缓存中渲染

【2.2】为什么要预加载？

在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。

【2.3】预加载的优点

预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

【2.4】预加载实现方式

方法一：CSS方式实现预加载，隐藏在css的background的url属性里面

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }  
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }  
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

方法二：JavaScript实现预加载，通过javascript的Image对象设置实例对象的src属性实现图片的预加载

function preloadImg(url) {
    var img = new Image();
    img.src = url;
    if(img.complete) {
        //接下来可以使用图片了
        //do something here
    } else {
        img.onload = function() {
            //接下来可以使用图片了
            //do something here
        };
    }
}

三、懒加载和预加载的对比

两者都是提高页面性能有效的办法，两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

四、补充知识

【4.1】原生方法


    document.body.clientWidth // body对象宽度
    document.body.clientHeight // body对象高度

    document.documentElement.clientWidth // 可见区域宽度
    document.documentElement.clientHeight // 可见区域高度

    document.body.clientWidth // 网页可见区域宽
    document.body.clientHeight // 网页可见区域高
    document.body.offsetWidth // 网页可见区域宽(包括边线的宽)
    document.body.offsetHeight // 网页可见区域高(包括边线的高)
    document.body.scrollWidth // 网页正文全文宽document.body.scrollHeight // 网页正文全文高
    document.body.scrollTop // 网页被卷去的高
    document.body.scrollLeft // 网页被卷去的左
    window.screenTop // 网页正文部分上
    window.screenLeft // 网页正文部分左

    window.screen.height // 屏幕分辨率的高
    window.screen.width // 屏幕可用工作区高度
    window.screen.availHeight // 屏幕可用工作区高度
    window.screen.availWidth // 屏幕可用工作区宽度
    
    scrollHeight // 获取对象的滚动高度。   
    scrollLeft // 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离   
    scrollTop // 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离   
    scrollWidth // 获取对象的滚动宽度   
    offsetHeight // 获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的高度   
    offsetLeft // 获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的计算左侧位置   
    offsetTop //  获取对象相对于版面或由父坐标offsetTop属性指定的父坐标的计算顶端位置   
    event.clientX // 相对文档的水平座标   
    event.clientY // 相对文档的垂直座标   
    event.offsetX // 相对容器的水平坐标   
    event.offsetY // 相对容器的垂直坐标   
    document.documentElement.scrollTop // 垂直方向滚动的值   
    event.clientX+document.documentElement.scrollTop // 相对文档的水平座标+垂直方向滚动的量 
    
    // 屏幕可视窗口大小（兼容）
    window.innerHeight // 标准浏览器及IE9+ 
    document.documentElement.clientHeight // 标准浏览器及低版本IE标准模式
    document.body.clientHeight // 低版本混杂模式

    // 浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离（兼容）
    window.pagYoffset // 标准浏览器及IE9+ 
    document.documentElement.scrollTop // 兼容ie低版本的标准模式   
    document.body.scrollTop // 兼容混杂模式

【4.2】jQuery方法

$(window).height() // 浏览器时下窗口可视区域高度   
$(document).height()　// 浏览器时下窗口文档的高度   
$(document.body).height() // 浏览器时下窗口文档body的高度   
$(document.body).outerHeight(true) // 浏览器时下窗口文档body的总高度 包括border padding margin   
$(window).width() // 浏览器时下窗口可视区域宽度   
$(document).width() // 浏览器时下窗口文档对于象宽度   
$(document.body).width() // 浏览器时下窗口文档body的高度   
$(document.body).outerWidth(true) // 浏览器时下窗口文档body的总宽度 包括border padding 
$(document).scrollTop(); //获取滚动条到顶部的垂直高度
$(document).scrollLeft(); //获取滚动条到左边的垂直宽度

【4.3】直观图展示

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料

@Demi

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
图片的懒加载和预加载

一、懒加载【1.1】什么是懒加载？懒加载也就是延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。【1.2】为什么要懒加载？当很多页面，内容很丰富，页面很长，图片较多的时候。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要
复制链接

扫一扫