实现图片的异步加载（转载） 实现图片的异步加载

实现图片的异步加载

做者：Ziv小威
出处：http://imziv.com/
关于做者：专一于Java技术的程序员一枚，此外对JS开发保持着较高的兴趣。爱好音乐，阅读，FM等等。
本文版权归做者和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文链接。
若有问题，能够邮件：wewoor@foxmail.com
微博：Ziv小威

图片异步加载功能是如今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);

 

总结

以上就是图片异步加载的主要代码了。固然里面能够进行跟多的性能优化，例如我这里每次都须要从新遍历图片列表，只是经过单独的加载标记来确认图片是否加载过，咱们固然能够用不一样的数组列表分别装载加载过和未加载的图片元素，从而下降遍历次数等等。另外也能够给图片添加过分的loading动画等等，让这个异步加载插件更完善。我这里有个较为完整的异步加载的代码，有兴趣的朋友能够查看：https://github.com/wewoor/sloth

原文地址：http://imziv.com/blog/article/read.htm?id=75

做者：Ziv小威
出处：http://imziv.com/
关于做者：专一于Java技术的程序员一枚，此外对JS开发保持着较高的兴趣。爱好音乐，阅读，FM等等。
本文版权归做者和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文链接。
若有问题，能够邮件：wewoor@foxmail.com
微博：Ziv小威