jQuery简单实现图片预加载

   　jQuery实现图片预加载：

 　我们在做网站的时候经常会遇到这样的问题：一个页面有大量的图片导致页面加载速度缓慢，经常会出现一个白页用户体验很不好。那么如何解决这个问题呢?下面我来介绍一种在实际应用中经常会使用到的js预加载的方法。

　　JS代码

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(function(){
loadImg("fd039245d688d43f14f69eff7f1ed21b0ef43b5b.gif",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:

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!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>

　　其他实例

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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：单个图片加载出错时的操作。

　　懒加载，

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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!");
}

　　调试用例

　　?

1
2
3
4
5
6
7
8

console.log("loading...");
loadimg($("img"),funloading_obj,imgonload,funOnError);
/*loadimg(["block.gif",
"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",
"block.gif"
],funloading,imgonload,funOnError);*/

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

时间： 2024-12-03 19:43:41

jQuery简单实现图片预加载的相关文章

jQuery简单实现图片预加载_jquery

jQuery实现图片预加载 JS代码 $(function(){ loadImg("yun_qi_img/fd039245d688d43f14f69eff7f1ed21b0ef43b5b.gif",addImg); function loadImg(url,callback){ var img = new Image(); img.onload = function(){ img.onload = null; callback(img); } img.src=url; img.widt

javascript简单实现图片预加载_javascript技巧

简单的图片预加载 reloader.js 复制代码 代码如下: var images = new Array();   function preloadImages(){     for (i=0; i < preloadImages.arguments.length; i++){          images[i] = new Image();         images[i].src = preloadImages.arguments[i];     } } preloadImages(

jquery实现图片预加载_jquery

使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: $.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('img').attr('src', arguments[i]); } }; $.preloadImages('img/hover-on.pn

Jquery实现图片预加载与延时加载的方法_jquery

本文实例讲述了Jquery实现图片预加载与延时加载的方法.分享给大家供大家参考.具体分析如下: 有很多项目经常会需要判断图片加载完成后执行相应的操作,或者需要图片延迟加载,网上虽然已经有很不错的插件,但要为这些效果还得单独加载一个插件的话总感觉有点不舒服,干脆自己写了个方法: 复制代码 代码如下: function loadimg(arr,funLoading,funOnLoad,funOnError){  var numLoaded=0,  numError=0,  isObject=Obje

jQuery实现图片预加载效果_jquery

本文实例讲述了jQuery实现图片预加载效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div class="main"> <br> <div class="title">图片预加载</div> <div class="content"> <div class="img"> <a href="

jquery 图片预加载 自动等比例缩放插件_jquery

复制代码 代码如下: /* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 此插件使用时可让页面先加载,而图片后加载的方式, 解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题 ///参数设置: scaling 是否等比例自动缩放 width 图片最大

loadimage插件实现图片预加载

现在网上很流行图片预加载效果,这样可以很好的提高用户体验,也能减轻服务器压力 不过大部分使用起来都比较麻烦 我给大家推荐一个,基本上不需要修改你的html代码,只要调用本插件,并用jquery指定要加载的图片位置即可搞定 简单,实用,才是最好的,何必要搞那么复杂呢 jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ if(loadpic==null)loadpic="load3.gif"; return this.ea

实现图片预加载的三大方法

  预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性.   方法一:用CSS和JavaScript实现预加载   实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案

图片预加载并且自动等比例缩放的JS插件

/* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 此插件使用时可让页面先加载,而图片后加载的方式, 解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题 ///参数设置: scaling 是否等比例自动缩放 width 图片最大高 height 图片