jquery预加载图片的方法


Posted in Javascript onMay 27, 2015

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

这段代码可以在页面打开前对图片进行预加载,这个函数非常有用,可以给用户带来更好的体验。

function preloadImages(oImageList, callback) {
 if ( typeof (oImageList) == 'object' && typeof (callback) === "function") {
  var iCallbackAfter = oImageList.length;
  var iPreloadInterval = window.setInterval(function() {
   if (iCallbackAfter === 0) {
    window.clearInterval(iPreloadInterval);
    callback();
   }
  }, 100);
  $.each(oImageList, function(iIndex, sImage) {
   oImageList[iIndex] = new Image();
   oImageList[iIndex].onload = function(oResult) {
    iCallbackAfter--;
   };
   oImageList[iIndex].onabort = function(oResult) {
    console.log(oResult);
   };
   oImageList[iIndex].onerror = function(oResult) {
    console.log(oResult);
   };
   if (!sImage.match('http://')) {
    sImage = sImage;
   }
   oImageList[iIndex].src = sImage;
  });
 }
}

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

Javascript 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
jQuery仿gmail实现fixed布局的方法
May 27 #Javascript
js实现键盘Enter键提交表单的方法
May 27 #Javascript
js实现简单锁屏功能实例
May 27 #Javascript
JS实现简单路由器功能的方法
May 27 #Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 #Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 #Javascript
js实现文本框选中的方法
May 26 #Javascript
You might like
Linux下PHP连接Oracle数据库
2014/08/20 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
JavaScript字符串对象
2017/01/14 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
简单了解Django项目应用创建过程
2020/07/06 Python
python脚本第一行如何写
2020/08/30 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
小学新学期教师寄语
2014/01/18 职场文书
绿色环保口号
2014/06/12 职场文书
地震捐款倡议书
2014/08/29 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
董事长致辞
2015/07/29 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python