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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 Javascript
element中table高度自适应的实现
Oct 21 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与ASP
2006/10/09 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
vuex实现简易计数器
2016/10/27 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
vue实现列表垂直无缝滚动
2022/04/08 Vue.js
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python