案例图片延时加载的方法

最新推荐文章于 2024-07-12 16:27:40 发布

宿迁大志

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量169

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/dzg842400/article/details/132463001

版权

图片添加延时加载功能，可以使用以下步骤：

1. 将图片的`<img>`标签的`src`属性值改为一个占位图的URL，例如`<img src="占位图URL" data-src="https://www.meishuzi.com/logo/zb_users/upload/logo/msz92.jpg">`。这样可以确保页面加载时只加载占位图，而不是原始图片。

2. 在页面中添加JavaScript代码，用于检测图片是否进入可视区域。可以使用`Intersection Observer` API来实现这一功能。

```javascript

var images = document.querySelectorAll('img[data-src]');

   var options = {
     root: null,
     rootMargin: '0px',
     threshold: 0.1
   };

   var callback = function(entries, observer) {
     entries.forEach(function(entry) {
       if (entry.isIntersecting) {
         var image = entry.target;
         image.src = image.getAttribute('data-src');
         observer.unobserve(image);
       }
     });
   };

   var observer = new IntersectionObserver(callback, options);

   images.forEach(function(image) {
     observer.observe(image);
   });

这段代码首先获取所有带有`data-src`属性的图片元素，然后创建一个`IntersectionObserver`实例，设置观察者的回调函数。在回调函数中，当图片进入可视区域时，将`data-src`属性的值赋给`src`属性，并停止观察该图片。

3. 将以上代码放置在页面的适当位置，例如在`<body>`标签的末尾或在`<head>`标签中的`<script>`标签内。

这样，当页面加载时，图片将首先显示占位图，只有当图片进入可视区域时，才会加载原始图片。这可以提高页面加载速度和性能。

完整的html代码：

html
<!DOCTYPE html>
<html>
<head>
  <title>延时加载图片</title>
  <style>
    .placeholder {
      width: 200px;
      height: 200px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <h1>延时加载图片示例</h1>
  <img class="lazy" src="占位图URL" data-src="https://www.meishuzi.com/logo/zb_users/upload/logo/msz92.jpg" alt="图片">
  
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

      if ("IntersectionObserver" in window) {
        var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
          entries.forEach(function(entry) {
            if (entry.isIntersecting) {
              var lazyImage = entry.target;
              lazyImage.src = lazyImage.dataset.src;
              lazyImage.classList.remove("lazy");
              lazyImageObserver.unobserve(lazyImage);
            }
          });
        });

        lazyImages.forEach(function(lazyImage) {
          lazyImageObserver.observe(lazyImage);
        });
      } else {
        // 对于不支持Intersection Observer的浏览器，立即加载所有图片
        lazyImages.forEach(function(lazyImage) {
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
        });
      }
    });
  </script>
</body>
</html>

在上述代码中，你需要将`<img>`标签的`src`属性值改为占位图的URL，并将`data-src`属性值改为原始图片的URL。同时，你可以根据需要自定义占位图的样式。

此外，代码中使用了`Intersection Observer` API来实现延时加载功能。对于不支持该API的浏览器，代码会立即加载所有图片。

宿迁大志

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
案例图片延时加载的方法

在回调函数中，当图片进入可视区域时，将`data-src`属性的值赋给`src`属性，并停止观察该图片。在上述代码中，你需要将`<img>`标签的`src`属性值改为占位图的URL，并将`data-src`属性值改为原始图片的URL。1. 将图片的`<img>`标签的`src`属性值改为一个占位图的URL，例如`<img src="占位图URL" data-src="3. 将以上代码放置在页面的适当位置，例如在`<body>`标签的末尾或在`<head>`标签中的`<script>`标签内。
复制链接

扫一扫