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修改浏览器URL地址栏的实现代码
Oct 21 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
WebRTC记录音视频流(web技术分享)
Feb 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 常用类整理
2009/12/23 PHP
解析php中反射的应用
2013/06/18 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
python使用递归解决全排列数字示例
2014/02/11 Python
用Python编写web API的教程
2015/04/30 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
Python卸载模块的方法汇总
2016/06/07 Python
Python内建模块struct实例详解
2018/02/02 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
介绍一下#error预处理
2015/09/25 面试题
岗位职责定义及内容
2013/11/08 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
和睦家庭事迹
2014/05/14 职场文书
英文升职感谢信
2015/01/23 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫