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 相关文章推荐
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
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
多重?l件?合查?(二)
2006/10/09 PHP
php中常用编辑器推荐
2007/01/02 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
jquery队列函数用法实例
2014/12/16 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
javascript 闭包详解
2015/07/02 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
三好学生自我鉴定
2013/12/17 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
党员年度个人总结
2015/02/14 职场文书
离婚案件原告代理词
2015/05/23 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
解析MySQL索引的作用
2022/03/03 MySQL
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL
spring boot实现文件上传
2022/08/14 Java/Android