jquery实现懒加载

最新推荐文章于 2023-08-28 13:55:17 发布

杨-Yuki

最新推荐文章于 2023-08-28 13:55:17 发布

阅读量1.7k

点赞数 1

分类专栏： jQ

本文链接：https://blog.csdn.net/Orange_Sheep/article/details/108227077

版权

jQ 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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()
        }
        // 显示状态

杨-Yuki

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery实现懒加载

jquery方法的思想：页面中的img元素，若没有src属性，浏览器就不会发出请求去下载图片，只有通过Javascript设置了图片路径，浏览器才会发送请求。懒加载先在页面中把需要延迟加载的图片统一使用一张占位图进行占位，把真正的路径存在元素data-src属性里。页面加载完成后，通过scrollTop判断图片是否在用户的视野，如果在，则将 data-src的值取出来存放到src中。在滚轮事件中重复判断图片是否进入视中，如果在，则将data-url的值取出来存放到src中。html lang="e
复制链接

扫一扫