实现图片懒加载的两种方法

最新推荐文章于 2024-03-22 22:26:15 发布

Alice_yo

最新推荐文章于 2024-03-22 22:26:15 发布

阅读量4.2k

点赞数 4

分类专栏：懒加载文章标签： js

本文链接：https://blog.csdn.net/Alice_yo/article/details/107941424

版权

懒加载专栏收录该内容

1 篇文章 1 订阅

订阅专栏

懒加载及应用场景
懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。
当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。

实现的思路：
给目标元素指定一张占位图，将真实的图片链接存储在自定义属性中（data-src），
监听scroll事件，当图片出现在可视区时，将data-src值赋值给src，加载图片，在图片未加载时，用alt 属性，在图像无法显示时的替代文本

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .imgs{
           display: flex;
           flex-direction: column;
           text-align: center;
           width: 500px;
       }
       .img-item{
           height:600px;
           width: 400px;
           margin: 10px;
       }
   </style>
</head>
<body>
   <div class="imgs">
       <img data-src="imgs/1.jpg" alt="loading" class="img-item">
       <img data-src="imgs/2.jpg" alt="loading" class="img-item">
       <img data-src="imgs/3.jpg" alt="loading" class="img-item">

   </div>
</body>
<script>
     let imgs = document.querySelectorAll('img');
       let lazyload = function(){
           let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 	//获取浏览器滚动高度
           let height = window.innerHeight; 	//获取浏览器可视高度
           for(let i=0;i < imgs.length;i++){
               //如果元素距离文档顶部的高度小于浏览器的滚动高度加浏览器的可视高度，则需要加载
               if(imgs[i].offsetTop < scrollTop + height ){	  //imgs[i].offsetTop 距离文档顶部的高度
                   imgs[i].src = imgs[i].getAttribute('data-src'); //将data-src属性值赋值给src
               }
           }
       }
       //调用懒加载函数,加一个防抖函数
       function throttle(method,delay){
          let timer = null;
           return function(){
               clearTimeout(timer);
               timer=setTimeout(function(){
                   method()
               },delay);
           }
       }
       window.onscroll = throttle(lazyload,200);

</script>
</html>

jquery方法的思想也是一样的：
页面中的img元素，若没有src属性，浏览器就不会发出请求去下载图片，只有通过Javascript设置了图片路径，浏览器才会发送请求。

懒加载先在页面中把需要延迟加载的图片统一使用一张占位图进行占位，把真正的路径存在元素data-src属性里。

页面加载完成后，通过scrollTop判断图片是否在用户的视野，如果在，则将 data-src的值取出来存放到src中。

在滚轮事件中重复判断图片是否进入视中，如果在，则将data-url的值取出来存放到src中。

<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="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <title>图片懒加载</title>
</head>
<style>
    .wrapper{
        max-width: 800px;
        margin: 0 auto;
    }
    .wrapper::after {
        content: '';
        display: block;
        clear: both;
    }
    .wrapper img {
        float: left;
        width: 50%;
    }
</style>
<body>
    <div class="wrapper">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="1" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="2" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="3" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="4" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="5" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="6" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="7" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="8" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="9" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="10" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="11" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="12" data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="13" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="14" data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="15" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="16" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="17" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="18" data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="15" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="16" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="17" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
        <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="18" data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
    </div>
    <script>
	     //打开页面 调用一次 
        start()
        $(window).on('scroll', function() {
                start() //滚动页面时 调用一次
            })
        //加载函数 
        function start() {
            $('.wrapper img').not('[data-isLoaded]').each(function() {
                var $node = $(this)
                if (isShow($node)) {
                    //设置一个定时器起到缓冲效果 
                    setTimeout(function() {
                        loadIng($node)
                    }, 1000)

                }
            })
        }
        // 页面逻辑
        function isShow($node) {
            // 当一个元素出现在我们眼前（小于窗口高度）上窗口滚动的高度的时候就意味着到达目标点 
            // 可以开始加载图片或者其他内容
            return $node.offset().top <= $(window).height() + $(window).scrollTop()
        }
        // 显示状态
        function loadIng($img) {
            // 获取目标元素 并替换 
            $img.attr('src', $img.attr('data-src'))
            //性能优化 进行判断 已经加载的不会再进行加载  
            $img.attr('data-isLoaded', 1)
        }
    </script>
</body>
</html>

Alice_yo

关注

4
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
实现图片懒加载的两种方法

懒加载及应用场景懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。实现的思路：：给目标元素指定一张占位图，将真实的图片链接存储在自定义属性中（data-），监听scroll事件，当图片出现在可视区时，将data-src值赋值给src
复制链接

扫一扫