处理图片，加快网站访问的速度

最新推荐文章于 2024-09-24 18:02:10 发布

转载最新推荐文章于 2024-09-24 18:02:10 发布 · 843 阅读

本文介绍了一种简单的图片懒加载技术实现方法，通过将图片的加载延迟到页面滚动时才进行，以此来提高网页的加载速度。该技术利用HTML的data-src属性存储图片的真实路径，并通过JavaScript动态设置src属性。

首先是图片标记的写法

1	`<` `img` `data-src` `=` `"/images/image.jpg"` `alt` `=` `""` `>`

需要将图片的地址放到 data-src 属性里，而src值不需要，直接将src属性去掉。

CSS代码

所有具有data-src属性的图片，我们将其初始显示状态为不可见，通过透明度来调节：

         img {
        
         opacity: 
         1
         ;
        
         transition: opacity 
         0.3
         s;
        
         }
        
         img[data-src] {
        
         opacity: 
         0
         ;
        
         }

这样写的作用是什么？等当图片加载时，你就能看的效果了。

JavaScript代码

我们最终会将 data-src 属性去掉，换成src属性，但这是图片加载成功后的动作：

1

2

3

4

5

6

         [].forEach.call(document.querySelectorAll(
         'img[data-src]'
         ), 
         function
         (img) {
        
         img.setAttribute(
         'src'
         , img.getAttribute(
         'data-src'
         ));
        
         img.onload = 
         function
         () {
        
         img.removeAttribute(
         'data-src'
         );
        
         };
        
         });