用jquery实现图片的懒加载

最新推荐文章于 2024-05-17 14:04:51 发布

婼嘸娸倳

最新推荐文章于 2024-05-17 14:04:51 发布

阅读量457

点赞数

文章标签： jquery 图片服务器鼠标

本文链接：https://blog.csdn.net/qq_36358940/article/details/77070943

版权

注意：当鼠标未滚动到指定位置时，图片显示为错误的图片，减少服务器端的http请求。否则，显示图片。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片懒加载</title>
    </head>
    <style>
        #d1{
            height: 1000px;
        }
    </style>
    <body>
    <div id="d1"></div>
    <img class="lazy" alt="" src="1111.jpg" data-src="Koala.jpg" />
    <br />
    <img class="lazy" alt="" src="1111.jpg" data-src="Koala.jpg" />
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(window).scroll(function() {//窗口滚动的时候（鼠标滚轮的时候。。）
            $('img').each(function() {//把以下的方法作用到每一个img标签，可自行加限定条件

                var $imgSrc = $(this).attr('data-src');//获取每张图片对应地址
                var $imgTop = $(this).offset().top;//获取每张图片对应距离document顶部的高度
                var scrollT = $(window).scrollTop();//获取滚轮滚动的距离
                var halfDoc = $(window).height();//获取浏览器窗口可视高度
                var ifElse = (scrollT+halfDoc)>=$imgTop;//如果滚动距离加上窗口可视高度大于该图片距离document顶部的高度
                var _this=this;//保存this的作用域以便于在其它作用域上使用这个作用域
                if(ifElse){//如果条件成立
                    setTimeout(function(){$(_this).attr('src',$imgSrc);},1000);//把图片的src地址改成data-src的值（前面已经获取了）
                }
            }); //end object 'img'
        }); //end object window
    </script>
    </body>
</html>

婼嘸娸倳

关注

0
点赞
踩
0

收藏

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

注意：当鼠标未滚动到指定位置时，图片显示为错误的图片，减少服务器端的http请求。否则，显示图片。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片懒加载</title> </head> <style> #d1{ height: 1
复制链接

扫一扫