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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
javascript数组的使用
Mar 28 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
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桌面中心(二) 数据库写入
2007/03/11 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
python对字典进行排序实例
2014/09/25 Python
python显示生日是星期几的方法
2015/05/27 Python
对python3新增的byte类型详解
2018/12/04 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
品质主管的岗位职责
2013/12/04 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
大一学生个人总结
2015/02/15 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android