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真的不难-回顾一下基础知识
Jan 15 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
javascript的BOM汇总
Jul 16 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
jquery实现图片切换代码
Oct 13 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
Vue声明式渲染详解
May 17 Javascript
详解vue的diff算法原理
May 20 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
使用p5.js临摹动态图形
Oct 23 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
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
php中的依赖注入实例详解
2019/08/14 PHP
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
使用python实现baidu hi自动登录的代码
2013/02/10 Python
python之PyMongo使用总结
2017/05/26 Python
PyQT实现多窗口切换
2018/04/20 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
python 发送get请求接口详解
2020/11/17 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
大学生学期自我鉴定
2014/03/19 职场文书
促销活动计划书
2014/05/02 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python