Javascript实现图片预加载【回调函数，多张图片】

使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中，需要图片全部加载完成方可运行动画效果。此时程序中就会涉及多张图片预加载代码。当接二连三的案例中都涉及图片预加载时，就需要考虑把这个功能封装为一个通用方法。

（1）下面为JS实现图片预加载方法loadImages()：

//实现一系列图片的预加载

//参数sources:图片信息关联数组

//参数callback:回调函数——图片预加载完成后立即执行此函数。

function loadImages(sources, callback){

    var count = 0,

        images ={},

        imgNum = 0;

    for(src in sources){

        imgNum++;

    }

    for(src in sources){

        images[src] = new Image();

        images[src].onload = function(){

            if(++count >= imgNum){

                callback(images);

            }

        }

        images[src].src = sources[src];

    }

}

（2）在JS中调用预加载函数：

//存储图片链接信息的关联数组

var sources = {

    ietoHell : "img/IEtoHell.jpg",

    fuckIE : "img/fuckIE.jpg"

 };

//调用图片预加载函数，实现回调函数

 loadImages(sources, function(images){

//TO-DO something

    ctx.drawImage(images.ietoHell, 20,20,100,100);

    ctx.drawImage(images.fuckIE, 140,20,100,100);

 });

注意事项：

（1）先绑定image.onload事件，后加载图片

images[src] = new Image();

images[src].onload = function(){

    if(++count >= imgNum){

        callback(images);

    }

}

images[src].src = sources[src];

原因：如果图片从缓存中加载，速度非常快以至于没来得及绑定事件就加载完毕，自然不会触发绑定事件。

（2）for...in循环 与 for循环的区别

for循环用于迭代数组（array）

for...in循环用于迭代对象（object, {}）或者关联数组（hash array）

原文地址：http://www.myexception.cn/javascript/408426.html

下面是小练习：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

</head>

<body>

<a onClick="newload()">点击</a>

<img src="myFocus_white.gif" id="im0" />

<img src="myFocus_white.gif" id="im1"/>

<img src="myFocus_white.gif" id="im2"/>

<img src="myFocus_white.gif" id="im3"/>

<img src="myFocus_white.gif" id="im4"/>

<img src="myFocus_white.gif" id="im5"/>

<img src="myFocus_white.gif" id="im6"/>

<img src="myFocus_white.gif" id="im7"/>

</body>

<script type="text/javascript">

//存储图片链接信息的关联数组

var sources = {

    im0 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_1.png",

    im1 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_2.png",

    im2 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_3.png",

    im3 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_4.png",

    im4 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_5.png",

    im5 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_6.png",

    im6 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_7.png",

    im7 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_8.png"

 };

 //用于计算对象成员和数组成员个数

 function count(o){

                var t = typeof o;

                if(t == 'string'){

                        return o.length;

                }else if(t == 'object'){

                        var n = 0;

                        for(var i in o){

                                n++;

                        }

                        return n;

                }

                return false;

        }

//调用图片预加载函数，实现回调函数

    loadImages(sources, function(images){

//TO-DO something

        for(var i=0; i<count(images); i++)

            {

                oid = "im"+i;

                document.getElementById(oid).src = images[oid].src;

            }});

function loadImages(sources, callback){

    var count = 0,

        images ={},

        imgNum = 0;

    for(src in sources){

        imgNum++;

    }

    for(var src in sources){

        images[src] = new Image();

       //document.getElementById(src).src = images[src].src;

        images[src].onload = function(){

            if(++count >= imgNum){

                images[src].onload= null;

                callback(images);

            }

        }

        images[src].src = sources[src];

    }

}

function newload(){alert("预加载到底完成没？")}

</script>

</html>

Javascript兑现图片预加载【回调函数，多张图片】 (转载)的更多相关文章

  1. Javascript实现图片预加载【回调函数，多张图片】

    使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多张图片预加载代码.当接二连三的案例中都涉及图片预加载时,就 ...

  2. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  3. Javascript图片预加载详解 分类： JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  4. javascript 图片预加载

    <!DOCTYPE > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...

  5. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  6. javascript设计模式实践之代理模式--图片预加载

    图片的预加载就是在加载大图片前,先显示一个loading.gif,就算在网络比较慢的时候也能让人知道正在加载,总比啥反应都没有强. 下面这段代码就是预加载的一个简单的实现,假设先不处理加载图片时的on ...

  7. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  8. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  9. js 函数的多图片预加载(preload) 带插件版完整解析

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片预加载效果 本篇文章写的 ...

随机推荐

  1. [HMLY]5.模仿喜马拉雅 FM

    项目介绍: 文:HansRove(github)XiMaLaYa-by-HansRove- 仿做喜马拉雅, 对AVFoundation框架的一次尝试   软件环境: iOS9.1硬件环境: Mac O ...

  2. 接口速度慢问题查找（TTFB时间长）

    前些天自己写了一个网站,但是发现接口的速度按超级慢,业务逻辑并不复杂,原因究竟在哪呢? 首先说一下,我的数据库和项目均在同一台服务器上,按道理来说,接口访问本地的数据库应该会很快才对. 后来我发现线上 ...

  3. 所需的防伪表单字段“__RequestVerificationToken”不存在

    错误提示为:所需的防伪表单字段"__RequestVerificationToken"不存在. <%:Html.AntiForgeryToken()%> 在mvc4中的 ...

  4. python 之调用Linux shell命令及相关高级应用

    最近根据老大要求,将数据进行同步备份,结合第三方提供的工具.第三方服务其实是有python demo的,本想研究下实际的python sdk搞个demo开发的,但是发现有些组建装起来确实头大,而且本公 ...

  5. Angular JS Scope（作用域）

    Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 当你在 Ang ...

  6. javascript 私有方法的实现

    原文地址: http://frugalcoder.us/post/2010/02/11/js-classes.aspx Classy JavaScript - Best Practices 11. F ...

  7. MySQL数据库传输BLOB类型数据丢失 解决办法

    修改MySQL安装目录下my.ini文件配置:

  8. XAMPP 的MYSQL无法启动

    最近在学习小程序,小程序的后台cms系统需要安装XAMPP软件,这个软件是个集成软件,里面有MySql 和 Apache 等 ,首先进入小程序后台时需要启动MySql 和 Apache Apache ...

  9. Applet签名

    applet签名 1.生成密匙库 keytool -genkey -keystore mytest.store -alias mytest -validity 365 -keystore 密匙库 -a ...

  10. 安装openblas和matcaffe时遇到的问题

    1.在安装openblas时,报错:/usr/bin/ld: cannot find -lgfortran 这里是需要安装的是libgfortran-x.x-dev,“x.x”是版本名.使用sudo ...