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. USACO 3.3 Riding the Fences

    Riding the Fences Farmer John owns a large number of fences that must be repaired annually. He trave ...

  2. jmeter命令行运行-单节点

    jmeter有自己的GUI页面,但是当线程数很多或者现在有很多的测试场景都是基于linux下进行压测,这时我们可以使用jmeter的命令行方式来执行测试,该篇文章介绍jmeter单节点命令运行方式. ...

  3. 第一百二十五节，JavaScript，XML

    JavaScript,XML 学习要点: 1.IE中的XML 2.DOM2中的XML 3.跨浏览器处理XML 随着互联网的发展,Web应用程序的丰富,开发人员越来越希望能够使用客户端来操作XML技术. ...

  4. 安装器---Inno Setup

    Inno Setup[1]  用Delphi写成,其官方网站同时也提供源程序免费下载.它虽不能与Installshield这类恐龙级的安装制作软件相比,但也当之无愧算是后起之秀.Inno Setup是 ...

  5. java上传并下载以及解压zip文件有时会报文件被损坏错误分析以及解决

    情景描述: 1.将本地数据备份成zip文件: 2.将备份的zip文件通过sftp上传到文件服务器: 3.将文件服务器上的zip文件下载到运行服务器: 4.将下载的zip文件解压到本地(文件大小超过50 ...

  6. Python基础（十）-模块

    模块初识 一般把不同功能代码放到不同py文件,一个py文件就是一个模块 三种模块库: 1.Python标准库 2.第三方库 3.自定义库 导入模块:import 库名 (Python解释器只认识执行文 ...

  7. Oracle 连接字符串

    <!--web.config--><connectionStrings> <add name="MSSQL" connectionString=&qu ...

  8. postgreSQL-如何查数据库表、字段以及字段类型、注释等信息？

    之前从网上也搜索了一些关于postgreSQL的系统表含义以及如何查表相关信息,但是都没有一个完整的内容,所以自己将找到的一些内容作了下整合,大家可以根据自己需要再对sql进行调整. --1.查询对象 ...

  9. uitabbarController tababr 上方横线隐藏

    在自定义的tabbarController里加上这一句就ok [[UITabBar appearance] setShadowImage:[UIImage new]]; [[UITabBar appe ...

  10. 用户输入密码隐藏之getpass的使用

    有的时候,比如商城登录的时候,我希望输入的时候我的密码不为明文,如何实现呢? 这里就需要利用getpass模块中的getpass方法.注意,需要在linux上或者windows下运行,在pycharm ...