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. linux学习心态建设

    为啥我们要学习Linux 技术的价值不在于这个技术有多么高超,而在于技术本身给我们带来什么价值,所以很多时候我们学习一个技术,不能盲目学,是为了使用这个技术,知道这个技术的使用场景,知道这个技术带来的 ...

  2. C# DataRow[]转换DataTable

    DataTable dt = ... DataRow[] dr = dt.Select("ID=14"); dt = dr.CopyToDataTable();

  3. 使用jquery.validate.js插件进行表单里控件的验证

    jsp中具体实现的代码: <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  4. edgerouter bonding

    configure set interfaces bonding bond0 mode 802.3ad set interfaces ethernet eth1 bond-group bond0 se ...

  5. Servlet之保存用户偏好设置简单功能的实现

    写在前面: 先来陈述一下为什么会有这样一个需求和这篇博文. 这是公司的一个项目,我们负责前端,后台服务由其他公司负责.该系统有一个系统偏好设置模块,用户可以设置系统的背景图片等系统样式,因为这是一个比 ...

  6. Linux常用命令汇总及使用方法（一）

    最近开始学习Linux,但是因为原来没有接触过,所有现在先将Linux中常用的命令记录下来,方便自己后期使用. 1.登陆 通过secureCRT/xshell/ssh等软件远程登陆Linux (1)# ...

  7. Redis字符串类型相关操作命令

    string是redis最基本的类型,可以包括任何类型数据,如jpg图片或者序列化对象. 单个value最大上限是1G字节 如果只使用string类型,redis就可以被看做具有持久化特性的memca ...

  8. Oracle中sys和system用户的区别

    1.数据库的启动需要以SYSDBA/SYSOPER身份登录. 2.如果在同一主机上使用IPC连接到数据库使用操作系统授权,登录任何一个用户都可以拥有as sysdba和as sysoper. 3.sy ...

  9. 2.安装中国版本的firefox

    Linux刚安装好的时候,默认是火狐浏览器并且版本比较低,而且预装的是国际版 跟中国版无法同步,因为我windows上是中国版 首先去火狐主页,中文是http://www.firefox.com.cn ...

  10. Google Dremel 原理 - 如何能3秒分析1PB

    简介 Dremel 是Google 的“交互式”数据分析系统.可以组建成规模上千的集群,处理PB级别的数据.MapReduce处理一个数据,需要分钟级的时间.作为MapReduce的发起人,Googl ...