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随机漂浮广告代码具体实例
Nov 19 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
VUE2.0中Jsonp的使用方法
May 22 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
openlayers实现地图弹窗
Sep 25 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 读取shell管道传输过来的内容
2010/03/01 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
JS按回车键实现登录的方法
2014/08/25 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
python中rb含义理解
2020/06/18 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
sort命令的作用和用法
2013/08/25 面试题
酒店值班经理的工作职责范本
2014/02/18 职场文书
我的中国梦主题班会
2015/08/14 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
golang 实现时间戳和时间的转化
2021/05/07 Golang