懒加载与预加载应用

最新推荐文章于 2025-04-23 10:52:52 发布

weixin_30858241

最新推荐文章于 2025-04-23 10:52:52 发布

阅读量77

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tfl123/p/9293829.html

本文介绍了一种用于提升用户体验的懒加载技术。通过在图片进入可视区前使用占位图，并在进入可视区后加载真实图片的方式减少初始加载时间。文中提供了一个具体的实现案例，包括HTML、CSS和JavaScript代码。

为了给用户更好的体验，我们在做pc端的时候，会应用到一项懒加载技术。它的原理就是先给图片加一张一样的图，再给图片添加自定义属性路径图片，然后当图片进入可视区的时候展示真正的图片。代码如下；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5  
 6     <title>Document</title>
 7     <style>
 8         *{padding:0;margin:0}
 9         div img{
10     width: 400px;
11     height: 400px;
12     border-radius: 10px;
13     box-shadow: 0px 0px 10px black;
14     margin: 10px;
15    }
16     </style>
17 </head>
18 <body>
19     <div id="odiv">
20       
21     </div>
22     <script>
23 
24    var odiv=document.getElementById('odiv');
25    for(var i =0;i<10;i++){
26        var imgs =document.createElement('img');
27        odiv.appendChild(imgs);
28        imgs.setAttribute('src','img/1.jpg');
29        imgs.setAttribute('data-src','img/'+i+'.jpg');
30 
31    }
32    var imgs= document.getElementsByTagName('img');
33    window.onscroll=function(){
34     Array.from(imgs).forEach(function(img){
35         img.dataset.top=img.offsetTop;
36         console.log(img.dataset.top)
37        var n=document.documentElement.scrollTop+document.documentElement.clientHeight;
38        if(img.dataset.top<n){
39            var tem= new Image();
40            tem.src=img.dataset.src;
41            tem.onload=function(){
42                img.src=img.dataset.src;
43            }
44        }
45      })
46    }
47 
48    </script>