点击上方蓝字关注「悲伤日记」        

愿我如星君如月 夜夜流光相皎洁

    1.什么是懒加载？

    图片懒加载是一种网页优化技术。图片作为一种网络资源，在被请求时也与普通静态资源一样，将占用网络资源，而一次性将整个页面的所有图片加载完，将大大增加页面的首屏加载时间。为了解决这种问题，通过前后端配合，使图片仅在浏览器当前视窗内出现时才加载该图片，达到减少首屏图片请求数的技术就被称为“图片懒加载”。

    2.什么是预加载？

    资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

懒加载

html

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="lazyload.css">
</head>

<body>
    <div class="image-list">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/252339290/TB29PYUXnIlyKJjSZFrXXXn2VXa_!!252339290-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i3/24687421/TB2Xg1izsyYBuNkSnfoXXcWgVXa_!!24687421-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/890151842/TB2II1mnZbI8KJjy1zdXXbe1VXa_!!890151842-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/2096513830/TB2l1W0kRnTBKNjSZPfXXbf1XXa_!!2096513830-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i3/2586222636/TB2RDGrpqAoBKNjSZSyXXaHAVXa_!!2586222636-0-daren.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/1870112525/TB2Ae.xbOwIL1JjSZFsXXcXFFXa_!!1870112525-2-beehive-scenes.png_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/2194952831/TB2PwWty7qvpuFjSZFhXXaOgXXa_!!2194952831-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
    </div>
    <script src="./lazyload.js"></script>
</body>
</html>

css

.image-item {
    display: inline-block;
    width: 100%;
    height: 300px;
    background: gray;
}

js

var viewHeight = document.documentElement.clientHeight;
function lazyload() {
var imgs = document.querySelectorAll('img[data-original][lazyload]');
    imgs.forEach(item => {
        if (item.dataset.original == '') {
           return;
        }
        var rect = item.getBoundingClientRect();
        if (rect.bottom >= 0 && rect.top < viewHeight) {
            var img = new Image();
            img.src = item.dataset.original;
            console.log(img.src)
            img.onload = function() {
            item.src = img.src;
         }
         item.removeAttribute('data-original');
         item.removeAttribute('lazyload')
      }
   })
}
lazyload();
document.addEventListener('scroll', lazyload)

效果

  1. 蓝色为已经请求加载的图片

  2. 红色为还没有请求加载的图片

默认打开，没有操作前

向下滚动前

向下滚动后

冷门属性

ocument.addEventListener（事件监听）

document.addEventListener('scroll', function() {
    console.log('aa')
})

dataset

用`dataset.original`获取`data-original` 的属性

img.onload

事件在图片加载完成后立即执行

getBoundingClientRect

用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性

文档各种高度

document.documentElement.clientHeight:视口的大小
document.documentElement.scrollHeight:文档的大小
document.documentElement.offsetHeight:文档的大小

预加载

标签

<img style="display:none;" src="https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg" alt="">

new Image()

var image = new Image();
image.src = 'https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg';
<script src='./myPreload.js'></script>

xml

<script src="https://cdn.bootcss.com/PreloadJS/1.0.1/preloadjs.min.js">
</script>
<script>
   var queue = new createjs.LoadQueue();
   queue.installPlugin(createjs.Sound);
   queue.on("complete", handleComplete, this);
   queue.loadFile({
      id: "sound",
      src: "http://path/to/sound.mp3"
   });
   queue.loadManifest([{
      id: "myImage",
      src: "path/to/myImage.jpg"
   }]);
   function handleComplete() {
      createjs.Sound.play("sound");
      var image = queue.getResult("myImage");
      document.body.appendChild(image);
    }
</script>

Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

avatar 魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

avatar 魔乐社区
cover

魔乐社区月度精选（26年2月）

avatar 魔乐社区