javascript图片预加载完整实例


Posted in Javascript onDecember 10, 2015

本文实例讲述了javascript图片预加载的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>图片预加载</title>
</head>
<body>
<img id="song" width="300" src="http://www.baidu.com/img/bdlogo.gif" _src="http://p2009c.zbjimg.com/task/2009-12/03/188273/middlexznxwkia.gif" />
</body>
</html>
<script type="text/javascript">
 //默认图片
 var defurl = 'http://www.baidu.com/img/bdlogo.gif';
 //一张大尺寸图片
 var imgurl = 'http://www.planeart.cn/demo/imgReady/vistas24.jpg';
 //一张gif图片
 var gifurl = 'http://p2009c.zbjimg.com/task/2009-12/03/188273/middlexznxwkia.gif';
 //图片预加载
 function loadImage(url, callback) {
  var img = new Image(); //创建一个Image对象,实现图片的预下载
  img.onload = function(){
   img.onload = null;//gif图片在ie下会循环请求
   callback(img);
  }
  img.src = url;
 }
 var img = document.getElementById('song');
 var url = img.getAttribute('_src')
 loadImage(gifurl,function(){
  //alert('ok');
  img.src = url;
 })
 /**
  * 网络上通用的图片预加载函数
  * @param url
  * @param callback
  */
 var imgLoad = function (url, callback) {
  var img = new Image();
  img.src = url;
  if (img.complete) {
   callback(img.width, img.height);
  } else {
   img.onload = function () {
    callback(img.width, img.height);
    img.onload = null;
   };
  };
 };
 // 更新:
 // 05.27: 1、保证回调执行顺序:error > ready > load;2、回调函数this指向img本身
 // 04-02: 1、增加图片完全加载后的回调 2、提高性能
 /**
  * 图片头数据加载就绪事件 - 更快获取图片尺寸
  *
  * 原理:没有缓存的情况下,用计时器不断验证图片的大小是否发生变化,如果不在变化则为ready
  *  如果有缓存则w3c浏览器会调用 complete,ie则会走 onload,都不在走 计时器那部分
  *
  * @version 2011.05.27
  * @author TangBin
  * @param {String} 图片路径
  * @param {Function} 尺寸就绪
  * @param {Function} 加载完毕 (可选)
  * @param {Function} 加载错误 (可选)
  * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
alert('size ready: width=' + this.width + '; height=' + this.height);
});
  */
 var imgReady = (function () {
  var list = [], intervalId = null,
   // 用来执行队列
   tick = function () {
    var i = 0;
    for (; i < list.length; i++) {
     list[i].end ? list.splice(i--, 1) : list[i]();
    }
    ;
    !list.length && stop();
   },
   // 停止所有定时器队列
   stop = function () {
    clearInterval(intervalId);
    intervalId = null;
   };
  return function (url, ready, load, error) {
   var onready, width, height, newWidth, newHeight,
    img = new Image();
   img.src = url;
   // 如果图片被缓存,则直接返回缓存数据
   if (img.complete) {
    ready.call(img);
    load && load.call(img);
    return;
   }
   ;
   width = img.width;
   height = img.height;
   // 加载错误后的事件
   img.onerror = function () {
    error && error.call(img);
    onready.end = true;
    img = img.onload = img.onerror = null;
   };
   // 图片尺寸就绪
   onready = function () {
    newWidth = img.width;
    newHeight = img.height;
    if (newWidth !== width || newHeight !== height ||
     // 如果图片已经在其他地方加载可使用面积检测
     newWidth * newHeight > 1024
     ) {
     ready.call(img);
     onready.end = true;
    }
    ;
   };
   onready();
   // 完全加载完毕的事件
   img.onload = function () {
     // onload在定时器时间差范围内可能比onready快
    // 这里进行检查并保证onready优先执行
    !onready.end && onready();
    load && load.call(img);
    // IE gif动画会循环执行onload,置空onload即可
    img = img.onload = img.onerror = null;
   };
    // 加入队列中定期执行
   if (!onready.end) {
    list.push(onready);
    // 无论何时只允许出现一个定时器,减少浏览器性能损耗
    if (intervalId === null) intervalId = setInterval(tick, 40);
   }
   ;
  };
 })();
 var img_url = 'http://www.planeart.cn/demo/imgReady/vistas24.jpg';
 imgReady(img_url, function () {
  //console.info(this.width);
  //console.info(this.height);
  alert(this.width + '\n' + this.height);
  document.getElementById('song').src = img_url;
 })
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
webpack的移动端适配方案小结
Jul 25 Javascript
JavaScript动态插入CSS的方法
Dec 10 #Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 #Javascript
js表单提交和submit提交的区别实例分析
Dec 10 #Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 #Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 #Javascript
JS提交form表单实例分析
Dec 10 #Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 #Javascript
You might like
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
在Vue中使用antv的示例代码
2020/06/29 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
初步理解Python进程的信号通讯
2015/04/09 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
python2.7实现邮件发送功能
2018/12/12 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
python关于倒排列的知识点总结
2020/10/13 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
采购内勤岗位职责
2013/12/10 职场文书
教师绩效考核方案
2014/01/21 职场文书
装配出错检讨书
2014/09/23 职场文书
导师工作推荐信
2015/03/27 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技