怎样提升用户体验?js图片的预加载技术帮助您!

发送到手机
使用"扫一扫"即可发送至手机

随着互联网技术的发展,网页设计越来越倾向于使用大量的图片来堆积布局,以达到最佳视觉体验。这样成品的网页中的图片数量也开始显著地增长。想想你所浏览的流行网站,它们中都存在着大banner、大背景图片。

对这么多的图片带来的网页的体积的增加,带来的弊端也是显而易见的, 所以用js图片的预加载技术来预加载这一堆图片,这样对网站性能及可用性的提升是有好处的,这样避免了图片加载过程中页面的闪烁、破裂(视觉上)等问题。

我的解决思路是分析页面中的样式表(包括外链及内联),收集所有图片的url,并保存到一个数组,然后遍历这个数组,为每张图片创建一个js图片对象,来实现图片预加载。

第一步 分析页面中的样式表(包括外链及内联),收集所有图片的url,并保持到一个数组。

//定义一个空数组,用来存放 解析样式得到的图片地址
var imageURLs = new Array();

//解析css文件,得到
function analyzeCSSFiles()
{
    var cssRules;//css规则

    //遍历“document.styleSheets”对象来获得页面使用的所有样式表
    for (var i = 0; i < document.styleSheets.length; i++)
    {
        //获取css样式表的根目录url地址。函数见下面的getBaseURL()
        var baseURL = getBaseURL(document.styleSheets[i].href);
    
        //检测样式表的“cssRules”或“rules”中是否包含CSS规则。
        if (document.styleSheets[i].cssRules) {
            cssRules = document.styleSheets[i].cssRule;
        }
        else if (document.styleSheets[i].rules)
        {
            cssRules = document.styleSheets[i].rules;
        }
    
        //循环提取出的css规则
        for (var j = 0; j < cssRules.length; j++)
        {
            //解析所有非空css规则,确认是否存在图片
            if (cssRules[j].style && cssRules[j].style.cssText)
            {
                var cssRule = cssRules[j].style.cssText.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);
                if (cssRule)
                {
                    cssRule = (cssRule + "").replace("\"", "");
                    imageURLs.push(baseURL + cssRule);
                }
            }
        }
    
    }
}

//解析CSS文件的绝对地址
function getBaseURL(cssLink)
{
    cssLink = (cssLink) ? cssLink : 'window.location.href'; 
    var urlParts = cssLink.split('/');
    urlParts.pop();
   
    var baseURL = urlParts.join('/'); 
   
    if (baseURL != "") 
    {
        baseURL += '/'; 
    }
   
    return baseURL;
}

第二步 遍历上面得到的图片地址数组,为每张图片创建一个js图片对象。

请注意“setTimeout”的使用,它确保了每个图片加载是依序执行的,当前图片加载完成才会加载下一个。原因是某些浏览器无法同时处理超过2个请求(译者注:IE6单域下的并发连接数限制就是2个)。为了避免可能的死锁,这里使用jQuery的bind方法给“load”、“onreadystatechange”和“error”事件绑定了一个处理器。这样可以确保遇到无法加载的遗失图片时,“errorTimer”可以把你带回正确的轨道。

此处代码小pig正在紧张整理中,稍后发布……



怎样提升用户体验?js图片的预加载技术帮助您!

怎样提升用户体验?js图片的预加载技术帮助您!

分享: