26
2013
07

如何实现网页图片资源加载进度条【类似Gmail进度条】

做前端的都知道网页资源文件的预加载,懒加载都能提高我们额网页加载速度,或则说可以让用户感觉有所提升。特别是在网页资源比较多的情况下预加载,懒加载尤其能为我们提高用户体验加分。本文就来对图片预加载这部分来做实例,例子跟Gmail加载的形式一样,在资源加载完成前显示资源加载进度条,所有图片资源加载完后再展示页面。


需求:

1. 解析JSON数据格式得到图片地址,并将图片分4栏展示到页面上。

2. 在所有图片加载未加载完成前,展示进度条,进度条能有效代表图片加载进度。加载完后,展示所有图片。


分析:

图片资源预加载的核心思想是,利用Image对象和load事件。在load中处理进度,而进度条的进度代表图片加载的个数,例如20张图片,如果加载完了8张,那么进度条就加载40%。


先看效果图,加载进度

进度条

美女多多

美女


具体实例代码:

HTML页面代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>如何实现网页图片资源加载进度条【实例】</title>
        <meta name="description" content="" />
        <meta name="author" content="arain.yu" />
        <style type="text/css">
            /* style */
        </style>
    </head>
    <body>
        <div>
            <div class="wrap">
                <div id="gallery">
                    <div id="loading_box">
                        <span id="loading">0%</span>
                    </div>
                </div>
            </div>
        </div>
        <script src="gallery.js"></script>
    </body>
</html>

gallery.js的实现代码

/**
 * @author arain.yu
 */
            
var gallery = {
    //JSON数据,详细查看源文件
};
var imageArr =[], loadImageCount = 0;
var domGallery, domLoading;
var gallery1=[], gallery2=[], gallery3=[], gallery4=[];
            
var loadCallback = function(){
    var len = imageArr.length, loadPercentage;
                
    loadImageCount++;
    loadPercentage = ((loadImageCount/len)*100).toFixed(0) + "%";
    domLoading.style.width = loadPercentage;
    domLoading.innerHTML = loadPercentage;
                
    if(loadImageCount == imageArr.length){
        var imagesHtml = [],
            createColumn = function(gallery){
                return '<div class="images">' + gallery.join('') + '</div>'
            };
                    
        imagesHtml.push(createColumn(gallery1));
        imagesHtml.push(createColumn(gallery2));
        imagesHtml.push(createColumn(gallery3));
        imagesHtml.push(createColumn(gallery4));
        imagesHtml.push('<br class="cb" />');
                    
        domGallery.innerHTML = imagesHtml.join('');
    }
};
            
var createGallery = function(image, j){
    var html ='<div class="image"><img src="'+image.src+'" alt="'+image.title+'" /></div>';
    //console.log(j);
                
    var mark = j%4;
    switch(mark){
        case 1:
            gallery1.push(html);
            break;
        case 2:
            gallery2.push(html);
            break;
        case 3:
            gallery3.push(html);
            break;
        default:
            gallery4.push(html);
    }
}
            
window.onload = function(){
    domGallery = document.getElementById('gallery');
    domLoading = document.getElementById('loading')
                
    var j = 0;
    for(girl in gallery){
        imageArr.push(new Image());
        imageArr[j].src = gallery[girl].src;
        imageArr[j].onload = loadCallback;
        j++;
                    
        createGallery(gallery[girl], j);
    }
};


扩展:

代码挺简单。很好懂,但如果我们不从JSON解析图片地址,而是从页面中获取呢? 这时候其实原理一样,只要先隐藏页面上相应对象,然后页面获取所有img元素,并循环得到所有地址在预加载,加载完后再显示相应对象就是了。


本实例源码附件:

gallay.zip


« 上一篇下一篇 »

评论列表:

1.Sigma  2014/3/31 15:44:23 回复该留言
请问,单张图片的加载进度展示,有可行的实现思路吗?
.Arain  2014/4/24 15:02:17 回复该留言
单图片进度条到是没很好的解决方案,你可以以一张小模糊图的方式来处理,待加载完再显示大图。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。