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 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
js获取class的所有元素
Mar 28 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
JS实现多选框的操作
Jun 24 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
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
jquery easyui使用心得
2014/07/07 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
Python迭代器和生成器介绍
2015/03/06 Python
python读写配置文件操作示例
2019/07/03 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
Python的pygame安装教程详解
2020/02/10 Python
django从后台返回html代码的实例
2020/03/11 Python
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
市场营销工作计划书
2014/05/06 职场文书
高三霸气励志标语
2014/06/24 职场文书
公司员工活动策划方案
2014/08/20 职场文书
环保建议书范文
2015/09/14 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python