关于图片懒加载

最新推荐文章于 2024-01-11 14:36:27 发布

天秤座_

最新推荐文章于 2024-01-11 14:36:27 发布

阅读量59

点赞数

分类专栏：代码篇文章标签：原创

本文链接：https://blog.csdn.net/weixin_44483523/article/details/103478417

版权

代码篇专栏收录该内容

7 篇文章 0 订阅

订阅专栏

**图片懒加载文中图片路径替换为本地 **

<!DOCTYPE html>
<html lang="zh">
<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">
	<title></title>
	<style type="text/css">
				img {
					display: block;
					margin-bottom: 50px;
					width: 400px;
					height: 400px;
					border: 1px solid red;
				}
    </style>
</head>
<body>
	 <img src="logo2.jpg" data-src="logo1.jpg" alt="">
    <img src="logo2.jpg" data-src="logo1.jpg" alt="">
    <img src="logo2.jpg" data-src="logo1.jpg" alt="">
    <img src="logo2.jpg" data-src="logo1.jpg" alt="">
    <img src="logo2.jpg" data-src="logo1.jpg" alt="">
    <img src="logo2.jpg" data-src="logo1.jpg" alt="">
    <img src="logo2.jpg" data-src="logo1.jpg" alt="">
    <img src="logo2.jpg" data-src="logo1.jpg" alt="">
    <img src="logo2.jpg" data-src="logo1.jpg" alt="">
    <img src="logo2.jpg" data-src="logo1.jpg" alt="">
    <img src="logo2.jpg" data-src="logo1.jpg" alt="">
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    var n = 0,
        imgNum = $("img").length,
        img = $('img');

    lazyload();

    $(window).scroll(lazyload);

    function lazyload(event) {
        for (var i = n; i < imgNum; i++) {
            if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
                if (img.eq(i).attr("src") == "logo2.jpg") {
                    var src = img.eq(i).attr("data-src");
                    img.eq(i).attr("src", src);
                    n = i + 1;
                }
            }
        }
    }
</script>

天秤座_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于图片懒加载

**图片懒加载文中图片路径替换为本地 **<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
复制链接

扫一扫