使用jQuery实现图片的延迟加载

图片经常在网页中使用，图片消耗大量流量. 通常情况下，浏览器将解析整个HTML代码，然后从上到下加载的图像标签. 如果页面很长，则隐藏在页面下方的图片已被浏览器加载. 如果用户不向下滚动页面，他们将看不到这些图片，这等同于浪费图片的访问量.

因此，淘宝和京东的流量很大，产品介绍页面上必须有大量图片. 因此，这些页面上的图片是“按需加载”的，也就是说，当用户滚动页面并显示它时. 加载图片. 当网络速度非常快时，用户将无法感知延迟加载操作，从而节省了流量浏览器加载图片原理，并且不影响用户浏览.

本文给出了使用jQuery实现懒惰图像加载的原理. 它的基本思想是: 在输出HTML时，不要直接输出

因此，页面上显示的图片是gif加载. 当页面滚动时，如果图片出现在屏幕上，请使用jQuery将src属性替换为data-src内容，浏览器将实时加载它.

JavaScript代码如下:

//注意: 需要引入jQuery和下划线

$（函数（）{

//获取窗口引用:

var $ window = $（窗口）;

//获取包含data-src属性的img并将其作为jQuery对象存储在数组中:

var lazyImgs = _.map（$（'img [data-src]'）. get（），function（i）{

返回$（i）;

}）;

//定义事件功能:

var onScroll = function（）{

//获取页面的滚动高度:

var wtop = $ window.scrollTop（）;

//确定是否仍然有卸载的img:

if（lazyImgs.length> 0）{

//获取可见区域的高度

var wheight = $ window.height（）;

//存储要删除的索引:

var loadingIndex = [];

//遍历数组的每个img元素:

_. 每个（lazyImgs，函数（$ i，索引）{

//确定它是否在可见范围内:

if（$ i.offset（）. top-wtop

//设置src属性:

$ i.attr（'src'，$ i.attr（'data-src'））;

//添加到要删除的阵列:

loadedIndex.unshift（索引）;

}

}）;

//删除已处理的对象:

_. 每个（loadedIndex，函数（index）{

lazyImgs.splice（索引，1）；

}）;

}

};

//绑定事件:

$ window.scroll（onScroll）;

//手动触发一次:

onScroll（）;

onScroll（）函数必须手动触发一次，因为在显示页面时不会触发滚动事件. 如果这些图片已经在可见区域中，则这些图片仍处于加载状态，需要手动触发一次才能正常显示.

要测试延迟加载图像的效果，可以在Chrome浏览器控制台中选择“网络”，然后将“”更改为“慢速3G”浏览器加载图片原理，以模拟在慢速网络浏览器上延迟加载图片的效果: p>

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-200472-1.html