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

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

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

  1. //实现一系列图片的预加载
  2. //参数sources:图片信息关联数组
  3. //参数callback:回调函数——图片预加载完成后立即执行此函数。
  4. function loadImages(sources, callback){
  5.     var count = 0,
  6.         images ={},
  7.         imgNum = 0;
  8.     for(src in sources){
  9.         imgNum++;
  10.     }
  11.     for(src in sources){
  12.         images[src] = new Image();
  13.         images[src].onload = function(){
  14.             if(++count >= imgNum){
  15.                 callback(images);
  16.             }
  17.         }
  18.         images[src].src = sources[src];
  19.     }
  20. }

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

  1. //存储图片链接信息的关联数组
  2. var sources = {
  3.     ietoHell : "img/IEtoHell.jpg",
  4.     fuckIE : "img/fuckIE.jpg"
  5.  };
  6.  
  7. //调用图片预加载函数，实现回调函数
  8.  loadImages(sources, function(images){
  9. //TO-DO something
  10.     ctx.drawImage(images.ietoHell, 20,20,100,100);
  11.     ctx.drawImage(images.fuckIE, 140,20,100,100);
  12.  });

注意事项：

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

  1. images[src] = new Image();
  2. images[src].onload = function(){
  3.     if(++count >= imgNum){
  4.         callback(images);
  5.     }
  6. }
  7. images[src].src = sources[src];

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

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

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

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

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

下面是小练习：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6.  
  7. </head>
  8.  
  9. <body>
  10. <a onClick="newload()">点击</a>
  11. <img src="myFocus_white.gif" id="im0" />
  12. <img src="myFocus_white.gif" id="im1"/>
  13. <img src="myFocus_white.gif" id="im2"/>
  14. <img src="myFocus_white.gif" id="im3"/>
  15. <img src="myFocus_white.gif" id="im4"/>
  16. <img src="myFocus_white.gif" id="im5"/>
  17. <img src="myFocus_white.gif" id="im6"/>
  18. <img src="myFocus_white.gif" id="im7"/>
  19. </body>
  20. <script type="text/javascript">
  21. //存储图片链接信息的关联数组
  22. var sources = {
  23.     im0 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_1.png",
  24.     im1 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_2.png",
  25.     im2 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_3.png",
  26.     im3 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_4.png",
  27.     im4 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_5.png",
  28.     im5 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_6.png",
  29.     im6 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_7.png",
  30.     im7 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_8.png"
  31.  };
  32.  //用于计算对象成员和数组成员个数
  33.  function count(o){
  34.                 var t = typeof o;
  35.                 if(t == 'string'){
  36.                         return o.length;
  37.                 }else if(t == 'object'){
  38.                         var n = 0;
  39.                         for(var i in o){
  40.                                 n++;
  41.                         }
  42.                         return n;
  43.                 }
  44.                 return false;
  45.         }
  46.  
  47. //调用图片预加载函数，实现回调函数
  48.     loadImages(sources, function(images){
  49. //TO-DO something
  50.         for(var i=0; i<count(images); i++)
  51.             {
  52.                 oid = "im"+i;
  53.                 document.getElementById(oid).src = images[oid].src;
  54.             }});
  55.  
  56. function loadImages(sources, callback){
  57.     var count = 0,
  58.         images ={},
  59.         imgNum = 0;
  60.     for(src in sources){
  61.         imgNum++;
  62.     }
  63.     for(var src in sources){
  64.         images[src] = new Image();
  65.        //document.getElementById(src).src = images[src].src;
  66.         images[src].onload = function(){
  67.             if(++count >= imgNum){
  68.                 images[src].onload= null;
  69.                 callback(images);
  70.             }
  71.         }
  72.         images[src].src = sources[src];
  73.     }
  74. }
  75. function newload(){alert("预加载到底完成没？")}
  76. </script>
  77. </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. C语言温度

    #include <stdio.h> #include <stdlib.h> /* run this program using the console pauser or a ...

  2. etcd 集群搭建

    现有三台机器 CentOS7 node1 10.2.0.10 node2 10.2.0.11 node3 10.2.0.12  1 源码解压命令行方式 node1 ./etcd --name infr ...

  3. AC自动机(AC automation)

    字典树+KMP 参考自: http://www.cppblog.com/mythit/archive/2009/04/21/80633.html ; //字典大小 //定义结点 struct node ...

  4. 《HTML5权威指南》

    <HTML5权威指南> HTML元素: html字符实体 html全局属性 html base标签 用元数据元素说明文档 标记文字(第八章) 标记文字.组织内容.文档分节 表格元素 表单元 ...

  5. ajax使用json

    json是什么什么的废话不说了,去百度吧.我这里介绍一下我为何要使用json.我使用ajax响应返回值时,项目中需求要返回多个值,不能只返回一个值.这时候就想起来用到json了.这可能只是json的一 ...

  6. sqlalchemy相关知识

    #!/usr/bin/env python3.5 # -*- coding:utf8 -*- # 多对多关联 from sqlalchemy import Table, Column, Integer ...

  7. Bower使用教程（限window）

    注意:其实用法大致相同,但是为了标准一些,这里还是标注一下window平台 Bower的使用教程非常简单,官网讲的很详细.这里再次赘述一遍. 使用bower,首先要知道bower是干什么的:bower ...

  8. ios 3D Touch功能的实现

    ios9中3D Touch功能是一个新的亮点,这个方便快捷的功能实现也比较简单,废话不多说直接上代码, 一.3D Touch功能添加分为两种(1).静态标签 (2).动态标签 (1).静态添加 这个方 ...

  9. SpringFramework_module

    org.springframework : spring-aop:基于代理的AOP spring-aspects:基于切面的AspectJ spring-beans:beans spring-cont ...

  10. 如何修改tomcat后台console标题（转）

    一个机器启动多个tomcat之后,分不清楚项目之间的区别,通过console口设置一下标题 tomcat控制台改名,修改方法:   1.找到tomcat\bin\catalina.bat   2.找到 ...