图片懒加载

最新推荐文章于 2025-04-17 17:41:39 发布

于丸

最新推荐文章于 2025-04-17 17:41:39 发布

阅读量214

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/Ych_cxy/article/details/95472381

vue 专栏收录该内容

21 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.image-item {
    display: inline-block;
    width: 100%;
    height: 300px;
    background: gray;
}
		</style>
	</head>
	<body>
		<div class="image-list">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/252339290/TB29PYUXnIlyKJjSZFrXXXn2VXa_!!252339290-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i3/24687421/TB2Xg1izsyYBuNkSnfoXXcWgVXa_!!24687421-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/890151842/TB2II1mnZbI8KJjy1zdXXbe1VXa_!!890151842-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/2096513830/TB2l1W0kRnTBKNjSZPfXXbf1XXa_!!2096513830-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i3/2586222636/TB2RDGrpqAoBKNjSZSyXXaHAVXa_!!2586222636-0-daren.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/1870112525/TB2Ae.xbOwIL1JjSZFsXXcXFFXa_!!1870112525-2-beehive-scenes.png_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/2194952831/TB2PwWty7qvpuFjSZFhXXaOgXXa_!!2194952831-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
    </div>
	</body>
	<script>
		var viewHeight = document.documentElement.clientHeight;

        function lazyload() {
            var imgs = document.querySelectorAll('img[data-original][lazyload]');
            imgs.forEach(item => {

                if (item.dataset.original == '') {
                    return;
                }
                var rect = item.getBoundingClientRect();
                if (rect.bottom >= 0 && rect.top < viewHeight) {
					console.log("xia",rect.bottom)
					console.log("shang",rect.top)

//                     var img = new Image();
//                     img.src = item.dataset.original;
//                     console.log(img.src)
                    // img.onload = function() {
                        item.src = item.dataset.original;
                    // }
                    item.removeAttribute('data-original');
                    item.removeAttribute('lazyload')
                }
            })
        }
        lazyload();
        document.addEventListener('scroll', lazyload)
	</script>
</html>