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. js数组操作-打乱数组

    <style> html, body { margin: 0; padding: 0;} div span { display: inline-block; width: 25px; he ...

  2. Python学习笔记——基础篇【第六周】——logging模块

    常用模块之logging 用于便捷记录日志且线程安全的模块 import logging logging.basicConfig(filename='log.log', format='%(ascti ...

  3. CC版本添加 LUCI

    BB版本的时候,在 feeds/luci/contrib/package/luci下的Makefile文件添加上需要编译的 luci-application即可. 在CC版里改为:Feeds/luci ...

  4. Objective-C Runtime 运行时之一：类与对象(转载)

    Objective-C语言是一门动态语言,它将很多静态语言在编译和链接时期做的事放到了运行时来处理.这种动态语言的优势在于:我们写代码时更具灵活性,如我们可以把消息转发给我们想要的对象,或者随意交换一 ...

  5. TDD(测试驱动开发)的推广方法论

  6. Java 代码性能优化

    代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用,但是, ...

  7. HDU 2516 取石子游戏 斐波纳契博弈

    斐波纳契博弈: 有一堆个数为n的石子,游戏双方轮流取石子,满足: 1)先手不能在第一次把所有的石子取完: 2)之后每次可以取的石子数介于1到对手刚取的石子数的2倍之间(包含1和对手刚取的石子数的2倍) ...

  8. 扣出的图片无法调整大小 photoshop mac版本

  9. java命名

    Package 的命名 Package 的名字应该都是由一个小写单词组成. Class 的命名 Class 的名字必须由大写字母开头而其他字母都小写的单词组成 Class 变量的命名 变量的名字必须用 ...

  10. Faster-R-CNN编译使用及相应问题解决

    1.首先opencv是需要安装的,我用的ubuntu14.04,opencv3.0,具体安装教程可以参考网上很多,不想多提. 2.安装几个依赖包:cython,python-opencv和easydi ...