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 相关文章推荐
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
分享几个JavaScript运算符的使用技巧
Apr 24 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 curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
vuex实现购物车功能
2020/06/28 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
Python实现截屏的函数
2015/07/25 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python 互换字典的键值对实例
2019/02/12 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
班主任个人工作反思
2014/04/28 职场文书
离婚协议书怎么写
2014/09/12 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
Python3接口性能测试实例代码
2021/06/20 Python