页面图片懒加载

最新推荐文章于 2024-08-04 17:25:32 发布

红尘炼炼心

最新推荐文章于 2024-08-04 17:25:32 发布

阅读量284

点赞数

分类专栏： ❤『H5学习』 ❤『javascript学习』文章标签：懒加载图片

❤『javascript学习』同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

❤『H5学习』

17 篇文章 0 订阅

订阅专栏

图片懒加载，降低页面加载过多图片而影响加载速度与带宽的消耗。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Lazy加载</title>
	<style type="text/css" media="screen">
		img{ width: 500px; display: block; }
	</style>
</head>
<body>
	<img src="./image/load.gif" data-src="./image/1.jpg">
	<img src="./image/load.gif" data-src="./image/2.jpg">
	<img src="./image/load.gif" data-src="./image/3.jpg">
	<img src="./image/load.gif" data-src="./image/4.gif">
</body>
</html>
<script src="./script/jquery-1.10.1.min.js"></script>
<script src="./script/underscore-min.js"></script> 
<script type="text/javascript">
	// 注意: 需要引入jQuery和underscore
$(function() {
    // 获取window的引用:
    var $window = $(window);
    // 获取包含data-src属性的img，并以jQuery对象存入数组:
    var lazyImgs = _.map($('img[data-src]').get(), function (i) {
        return $(i);
    });
    // 定义事件函数:
    var onScroll = function() {
        // 获取页面滚动的高度:
        var wtop = $window.scrollTop();
        // 判断是否还有未加载的img:
        if (lazyImgs.length > 0) {
            // 获取可视区域高度:
            var wheight = $window.height();
            // 存放待删除的索引:
            var loadedIndex = [];
            // 循环处理数组的每个img元素:
            _.each(lazyImgs, function ($i, index) {
                // 判断是否在可视范围内:
                if ($i.offset().top - wtop < wheight) {
                	console.log($i);
                	console.log($i.offset().top);
                    // 设置src属性:
                    $i.attr('src', $i.attr('data-src'));
                    // 添加到待删除数组:
                    loadedIndex.unshift(index);
                }
            });
            // 删除已处理的对象:
            _.each(loadedIndex, function (index) {
                lazyImgs.splice(index, 1);
            });
        }
    };
    // 绑定事件:
    $window.scroll(onScroll);
    // 手动触发一次:
    onScroll();
})
</script>