首页 > 代码库 > 图片异步加载
图片异步加载
文章转载自：http://imziv.com/blog/article/read.htm?id=75
图片异步加载功能是现在web中非常常见的一个针对web做优化的方法。尤其是在移动端，面对大量的图片列表的时候，如果没有做相应的优化，会直接导致页面滑动和加载的卡顿，而且用户会莫名的发现当前应用占用的流量会很大，因为他可能都没有浏览到很多图片，而程序就自动加载了所以的图片，对于一个流量吃紧的人来讲，这个也是很讨厌的。所以实现按浏览需求加载时十分有必要的。
其实实现图片异步加载的核心思路十分简单，就是通过判断当图片元素是否出现在视窗范围内后，则去加载图片资源，否则不加载。所以我们需要首先解决判断img元素是否处于视图范围内的这个核心问题。让我们看看下面的图：
通过抓取img元素，js提供了相应的方法让我们可以获取到img元素距离视图top，和left的距离，viewport的高度和宽度等数据。然后通过监听窗口滚动事件，当页面滚动的时候，我们就去动态检测img元素的top和left值，与视窗的高度和宽度作比较，从而判断当前的img是否处于视窗范围。计算如下：
处于垂直范围： 图片距离视窗顶部距离 > 0 && 图片距离视窗顶部距离 <= 视窗高度
处于水平范围： 图片距离视窗左边距离 > 0 && 图片距离视窗左边距离 <= 视窗宽度
解决了这个判断图片在可视范围内的核心问题后，那么其他的问题都是否简单了。我们看下详细代码：
获取视窗的高度和宽度：
var _viewPortHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0), _viewPortWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);是否处于垂直范围
function isOnVerticalViewPort(ele) { var rect = ele.getBoundingClientRect(); // 获取距离视窗的位置信息 return rect.top > 0 && rect.top <= _viewPortHeight;};是否处于水平范围
function isOnHorizontalViewPort(ele) { var rect = ele.getBoundingClientRect(); return rect.left > 0 && rect.left <= _viewPortWidth;};有了这核心代码，我们只需要在滚动事件触发后，去动态的判断img元素了, 判断的示例代码如下：
function load(images) { for (var i = 0; i < images.length; i++) { var img = images[i]; if (isOnVerticalViewPort(img) && isOnHorizontalViewPort(img)) { var url = img.getAttribute(‘lz-src‘); // 获取图片资源的地址 img.setAttribute("src", url); img.isload = true; // 加载过后的图片设置加载标记，以免重复加载 } }}在html页面中的img元素的引用：
<img lz-src="http://s.cn.bing.net/az/hprichbg/rb/SkunkKit_ZH-CN10809503929_1920x1080.jpg"></img>通过给img元素添加lz-src标记，告诉异步脚本，这个元素需要异步加载图片。
监听滚动事件
var images = document.querySelectorAll(‘img[‘ + lz-src + ‘]‘); // 按标记获取图片元素 window.addEventListener("scroll", function(e) { load(images); }, false);图片异步加载
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。