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 相关文章推荐
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
浅谈angular4实际项目搭建总结
Dec 01 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 Javascript
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中的(伪)多线程与多进程
2013/07/01 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
python list中append()与extend()用法分享
2013/03/24 Python
使用python爬取B站千万级数据
2018/06/08 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python何时应该使用Lambda函数
2019/07/02 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
面向对象编程OOP的优点
2013/01/22 面试题
大学生秋游活动方案
2014/02/17 职场文书
市政管理求职信范文
2014/05/07 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
党在我心中演讲稿
2014/09/02 职场文书
重阳节慰问信
2015/02/15 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
Tomcat弱口令复现及利用
2022/05/06 Servers