javascript图片预加载实例分析


Posted in Javascript onJuly 16, 2015

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

lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果)。javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它。

这是大部分人使用预加载获取图片大小的例子:

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;
    };
  };
};

JavaScript代码:

// 更新:
// 05.27: 1、保证回调执行顺序:error > ready > load;2、回调函数this指向img本身
// 04-02: 1、增加图片完全加载后的回调 2、提高性能
/**
 * 图片头数据加载就绪事件 - 更快获取图片尺寸
 * @version 2011.05.27
 * <a href="http://my.oschina.net/arthor" class="referer" target="_blank">@author</a> TangBin
 * <a href="http://my.oschina.net/see" class="referer" target="_blank">@see</a>   http://www.planeart.cn/?p=1121
 * @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);
    };
  };
})();

调用例子:

imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
  alert('size ready: width=' + this.width + '; height=' + this.height);
});

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

Javascript 相关文章推荐
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
详解React中setState回调函数
Jun 14 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
Nuxt的路由动画效果案例
Nov 06 Javascript
Vue通过懒加载提升页面响应速度
May 10 Vue.js
javascript的BOM汇总
Jul 16 #Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 #Javascript
初识Javascript小结
Jul 16 #Javascript
浅谈javascript中的DOM方法
Jul 16 #Javascript
详细分析JavaScript函数定义
Jul 16 #Javascript
jQuery时间轴插件使用详解
Jul 16 #Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 #Javascript
You might like
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
javascript生成大小写字母
2015/07/03 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
python读写LMDB文件的方法
2018/07/02 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
Python双链表原理与实现方法详解
2020/02/22 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
python TCP包注入方式
2020/05/05 Python
linux比较文件内容的命令是什么
2013/03/04 面试题
物业管理毕业生个人的求职信
2013/11/30 职场文书
十佳护士获奖感言
2014/02/18 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
2014年电教工作总结
2014/12/19 职场文书
安全先进班组材料
2014/12/26 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
MySQL视图概念以及相关应用
2022/04/19 MySQL
mysql函数之截取字符串的实现
2022/08/14 MySQL