jQuery简单实现图片预加载


Posted in Javascript onApril 20, 2015

jQuery实现图片预加载

JS代码

$(function(){
   loadImg("http://d.hiphotos.baidu.com/image/pic/item/fd039245d688d43f14f69eff7f1ed21b0ef43b5b.jpg",addImg);
  function loadImg(url,callback){
    var img = new Image();
    img.onload = function(){
      img.onload = null;
      callback(img);
    }
    img.src=url;
    img.width ="202";
    img.height = "202";
    img.attr("defaulturl","../images/img.png");
    if(){}
  }
  function addImg(img){
    $(img).appendTo($(".imgload li"))
  }
})

HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片预加载</title>
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
   
    <div class="imgload">
      <ul>
          <li class="fl"></li>
          <li class="fl"></li>
          <li class="fl"></li>
          <li class="fl"></li>
          <li class="fl"></li>
          <li class="fl"></li>
          <li class="fl"></li>
          <li class="fl"></li>
          <li class="fl"></li>
      </ul>
    </div>
</body>
</html>

其他实例

function loadimg(arr,funLoading,funOnLoad,funOnError){ 
  var numLoaded=0, 
  numError=0, 
  isObject=Object.prototype.toString.call(arr)==="[object Object]" ? true : false; 
  
  var arr=isObject ? arr.get() : arr; 
  for(a in arr){ 
    var src=isObject ? $(arr[a]).attr("data-src") : arr[a]; 
    preload(src,arr[a]); 
  } 
  
  function preload(src,obj){ 
    var img=new Image(); 
    img.onload=function(){ 
      numLoaded++; 
      funLoading && funLoading(numLoaded,arr.length,src,obj); 
      funOnLoad && numLoaded==arr.length && funOnLoad(numError); 
    }; 
    img.onerror=function(){ 
      numLoaded++; 
      numError++; 
      funOnError && funOnError(numLoaded,arr.length,src,obj); 
    } 
    img.src=src; 
  } 
  
}

参数说明:
  arr:可以是存放图片路径的一个数组,也可以是选取到的img的jquery对象;
  funLoading:每一个单独的图片加载完成后执行的操作;
  funOnLoad:全部图片都加载完成后的操作;
  funOnError:单个图片加载出错时的操作。

懒加载,

var imgonload=function(errors){ 
    /*errors:加载出错的图片数量;*/ 
  console.log("loaded,"+errors+" images loaded error!"); 
} 
  
var funloading=function(n,total,src,obj){ 
    /* 
    n:已加载完成的数量; 
    total:总共需加载的图片数量; 
    src:当前加载完成的图片路径; 
    obj:当loadimg函数中传入的arr为存放图片路径的数组时,obj=src,是图片路径, 
        当arr为jquery对象时,obj是当前加载完成的img dom对象。 
    */ 
  console.log(n+"of"+total+" pic loaded.",src); 
  var newimg = document.createElement("img"); 
  newimg.src=src; 
  $("body").append(newimg).fadeIn(); 
} 
  
var funloading_obj=function(n,total,src,obj){ 
  console.log(n+"of"+total+" pic loaded.",src); 
  $(obj).attr("src",src); 
  $(obj).fadeIn(200); 
} 
  
var funOnError=function(n,total,src,obj){ 
  console.log("the "+n+"st img loaded Error!"); 
}

调试用例

console.log("loading..."); 
loadimg($("img"),funloading_obj,imgonload,funOnError); 
/*loadimg(["http://pic22.nipic.com/20120619/9607634_212642465144_2.jpg", 
     "http://pic21.nipic.com/20120531/1670912_103610084349_2.jpg", 
     "http://pic21.nipic.com/20120616/4952071_130629530136_2.jpg", 
     "http://pic21.nipic.com/20120610/1723580_105037029000_2.jpg", 
     "http://pic22.nipic.com/20120617/2572038_125013326121_2.jpg" 
    ],funloading,imgonload,funOnError);*/

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
EasyUI中的tree用法介绍
Nov 01 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 Javascript
jquery滚动到顶部底部代码
Apr 20 #Javascript
浅谈javascript属性onresize
Apr 20 #Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 #Javascript
被遗忘的javascript的slice() 方法
Apr 20 #Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 #Javascript
分享10个原生JavaScript技巧
Apr 20 #Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 #Javascript
You might like
PHP中动态HTML的输出技术
2006/10/09 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
解决laravel session失效的问题
2019/10/14 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
web 页面分页打印的实现
2009/06/22 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
在Django的session中使用User对象的方法
2015/07/23 Python
Python单链表简单实现代码
2016/04/27 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
对python3新增的byte类型详解
2018/12/04 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
python交互模式基础知识点学习
2020/06/18 Python
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
《忆江南》教学反思
2014/04/07 职场文书
党员年终个人总结
2015/02/14 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书