图片懒加载原理（面试）

最新推荐文章于 2022-12-19 14:23:45 发布

你的路由守卫

最新推荐文章于 2022-12-19 14:23:45 发布

阅读量336

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_45596827/article/details/127982274

版权

基本原理：
默认给当前页面所有的img标签的src属性赋值成同一个小图，当做所有图片的默认图片，然后再添加一个自定义属性，比如data-src,里面写上当前标签真正的图片地址，在滚动页面滚动条的过程中，判断是否有图片进入可视区，进入可视区的图片需要把身上的src属性值替换成data-src属性值，这样就完成了懒加载

基本实现：
<!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="./js/jquery.min.js"></script>
       <title>Document</title>
       <style>
           * {
               margin: 0;
               padding: 0;
           }
           img {
               display: block;
               width: 300px;
               height: 300px;
               border: 1px solid red;
               margin-top: 40px;
           }
       </style>
   </head>
   <body>
       <img
           style="margin-top: 1200px"
           data-src="./img/logo.png"
           src="./img/clock.png"
           alt=""
       />
       <img data-src="./img/logo.png" src="./img/clock.png" alt="" />
       <img data-src="./img/logo.png" src="./img/clock.png" alt="" />
       <img data-src="./img/logo.png" src="./img/clock.png" alt="" />
   </body>
   <script>
       //获取屏幕高度
       var pheight = window.innerHeight
       $(window).scroll(function () {
           // 总的滚动位置
           var totalheight = $(document).scrollTop() + pheight
           $('img').each(function () {
               // 展示用
               // if (totalheight >= $(this).offset().top + $(this).height()) {
               if (totalheight >= $(this).offset().top) {
                   // 替换图片原始地址
                   $(this).attr('src', $(this).attr('data-src'))
               } else {
                   $(this).attr('src', './img/clock.png')
               }
           })
       })
   </script>
</html>

你的路由守卫

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片懒加载原理（面试）

默认给当前页面所有的img标签的src属性赋值成同一个小图，当做所有图片的默认图片，然后再添加一个自定义属性，比如data-src,里面写上当前标签真正的图片地址，在滚动页面滚动条的过程中，判断是否有图片进入可视区，进入可视区的图片需要把身上的src属性值替换成data-src属性值，这样就完成了懒加载。// 替换图片原始地址。
复制链接

扫一扫