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. tablesorter周边文档

    一.简介: Tablesorter​作用于一个标准的HTML表格(有THEAD,TBODY),实现静态排序:主要特点包括: (1) 多列排序: (2) 支持文本.URI地址.数值.货币.浮点数.IP地 ...

  2. RandomAccessFile类初次使用

    RandomAccessFile : java提供的对文件内容的访问 既可以读文件 也可以写文件 支持随机访问文件 可以访问文件的任意位置 (1)java文件模型 : 在硬盘上的文件是byte byt ...

  3. webkit框架的使用

    // // JSViewController.m // Library // // Created by 朱逸 on 16/7/7. // Copyright © 2016年 朱逸. All righ ...

  4. Highcharts属性介绍

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. 3.struts2访问Servlet API,并和mybaits实现全套增删改查

    1.创建数据库脚本userinfo.sql prompt PL/SQL Developer import file prompt Created on 2016年5月19日 by pc set fee ...

  6. Hadoop集群出现no data node to stop的解决方案

    问题描述: 今天stop hadoop集群的时候出现no datanode to stop ,寻找解决方案,并不是网上资料所说的什么DFS Used .Non DFS Used等于0 .所有的节点都是 ...

  7. java 格式化输出方法

    在javaSE5中推出了printf方法来输出文本到控制台,在java中现在有如下方法可以输出文本: 1.System.out.println(....) //输出并换行 2.System.out.f ...

  8. 搭建gitbook环境

    1.官网下载安装nodejs,安装完成后使用终端输入node -v,用cmd命令窗口查看是否安装成功:如下图所示: 2.在cmd命令窗口中输入:npm install -g cnpm -registr ...

  9. 安装arcgis server完成，打开出现未关联错误怎么办

    在控制面板,默认程序-将文件类型或协议与程序关联-找到URL(manager右键属性)后缀名的文件双击,选择explorer即可

  10. JAVA的if用法，比如if(...){} 和if()没有大括号直接写下面的区别是什么

    有大括号的时候 大括号里面所有的 都归if管.只有条件为真的时候 才会执行.没有大括号的时候 只有下面的一句归if管,也就是说 当只有一句的时候 大括号可以省略 其它的 没区别.