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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
jquery 使用简明教程
Mar 05 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
详解python单元测试框架unittest
2018/07/02 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
pymysql的简单封装代码实例
2020/01/08 Python
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
会计助理的岗位职责
2013/11/29 职场文书
自我鉴定写作要点
2014/01/17 职场文书
高中美术教学反思
2014/01/19 职场文书
生产操作工岗位职责
2014/09/16 职场文书
民政局个人整改措施
2014/09/24 职场文书
企业工会工作总结2015
2015/05/13 职场文书
论文致谢词范文
2015/05/14 职场文书
把77A收信机改造成收音机
2022/04/05 无线电