<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>jquery picture Load Effect code </title>
<script language= "Web Effects" >
var Static_path = (location.protocol== ' https tutorial: ')? ' https://image.111cn.net/': ' image://www.111cn.net/';
jquery.fn.loadingimg = function (URL) {
var obj = this;
var img = new Image (); New img obj
img.src = URL; Set src either absolute or rel to CSS tutorial dir
var w = jquery (obj). attr (' width ');
var h = jquery (obj). attr (' height ');
jquery (obj). attr ({' src ': static_path+ '/includes/templates/dev_v2/css/images/imgbox/s.gif ', ' width ': w, ' Height ': h} );
$ (obj). css (' background ', ' url (' +static_path+ '/includes/templates/dev_v2/css/images/imgbox/loading_img_s.gif) 50% 50% no-repeat ');
MSIE or not
if (!img.complete) {
jquery (IMG). Bind (' Error load onreadystatechange ', function () {jquery (obj). attr (' src ', url);});
jquery (IMG). bind (' Load ', function () {jquery (obj). attr (' src ', url);});
} else {
jquery (obj). attr (' src ', url);
}
}
</script>
<body>
</body>
Code two
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=iso-8859-1 ">
<title>gaya Design-query loader</title>
<link rel= "stylesheet" href= "Css/style.css" type= "Text/css"/>
<script type= ' text/javascript ' src= ' yun_qi_img/notfound.jpg '/><br/>
<br/>
<p>
<p>
</p>
</p>
</p>
</div>
<script>
Queryloader.selectorpreload = "Body";
Queryloader.init ();
</script>
</body>
jquery Plug-in Code
var Queryloader = {
Overlay: "",
Loadbar: "",
Preloader: "",
Items:new Array (),
donestatus:0,
donenow:0,
Selectorpreload: "Body",
ieloadfixtime:2000,
Ietimeout: "",
Init:function () {
if (Navigator.useragent.match/msie (d+ (?:. d+) + (?: bd*)?) /) = = "Msie 6.0,6.0") {
Break if IE6
return false;
}
if (queryloader.selectorpreload = = "Body") {
Queryloader.spawnloader ();
Queryloader.getimages (Queryloader.selectorpreload);
Queryloader.createpreloading ();
} else {
$ (document). Ready (function () {
Queryloader.spawnloader ();
Queryloader.getimages (Queryloader.selectorpreload);
Queryloader.createpreloading ();
});
}
Help IE drown if it's trying to die:)
Queryloader.ietimeout = settimeout ("Queryloader.ieloadfix ()", queryloader.ieloadfixtime);
},
Ieloadfix:function () {
var ie = Navigator.useragent.match (/msie (d+ (?:. d+) + (?: bd*)?) /);
if (Ie[0].match ("MSIE")) {
while ((100/queryloader.donestatus) * Queryloader.donenow < 100) {
Queryloader.imgcallback ();
}
}
},
Imgcallback:function () {
Queryloader.donenow + +;
Queryloader.animateloader ();
},
Getimages:function (selector) {
var everything = $ (selector). Find ("*:not (script)"). each (function () {
var url = "";
if ($ (this). CSS ("background-image")!= "None") {
var url = $ (this). CSS ("Background-image");
else if (typeof (). attr ("src"))!= "undefined" && $ (this). attr ("TagName"). toLowerCase () = "img") {
var url = $ (this). attr ("src");
}
url = url.replace (URL ("", "");
url = url.replace (URL ("," "");
url = url.replace (""), "");
url = url.replace (")", "");
if (Url.length > 0) {
Queryloader.items.push (URL);
}
});
},
Createpreloading:function () {
Queryloader.preloader = $ ("<div></div>"). Appendto (Queryloader.selectorpreload);
$ (queryloader.preloader). CSS ({
Height: "0px",
Width: "0px",
Overflow: "Hidden"
});
var length = Queryloader.items.length;
Queryloader.donestatus = length;
for (var i = 0; i < length; i++) {
var imgload = $ ("</img>");
$ (imgload). attr ("src", queryloader.items[i]);
$ (imgload). Unbind ("Load");
$ (imgload). bind ("Load", function () {
Queryloader.imgcallback ();
});
$ (imgload). Appendto ($ (queryloader.preloader));
}
},
Spawnloader:function () {
if (queryloader.selectorpreload = = "Body") {
var height = $ (window). Height ();
var width = $ (window). width ();
var position = "fixed";
} else {
var height = $ (queryloader.selectorpreload). Outerheight ();
var width = $ (queryloader.selectorpreload). Outerwidth ();
var position = "absolute";
}
var left = $ (queryloader.selectorpreload). Offset () [' left '];
var top = $ (queryloader.selectorpreload). Offset () [' Top '];
Queryloader.overlay = $ ("<div></div>"). Appendto ($ (queryloader.selectorpreload));
$ (queryloader.overlay). addclass ("Qoverlay");
$ (queryloader.overlay). CSS ({
Position:position,
Top:top,
Left:left,
Width:width + "px",
Height:height + "px"
});
Queryloader.loadbar = $ ("<div></div>"). Appendto ($ (queryloader.overlay));
$ (Queryloader.loadbar). addclass ("Qloader");
$ (Queryloader.loadbar). CSS ({
Position: "Relative",
Top: "50%",
Width: "0%"
});
},
Animateloader:function () {
var perc = (100/queryloader.donestatus) * QUERYLOADER.DONENOW;
if (Perc > 99) {
$ (Queryloader.loadbar). Stop (). Animate ({
Width:perc + "%"
}, "Linear", function () {
Queryloader.doneload ();
});
} else {
$ (Queryloader.loadbar). Stop (). Animate ({
Width:perc + "%"
}, "Linear", function () {});
}
},
Doneload:function () {
Prevent IE from calling the fix
Cleartimeout (queryloader.ietimeout);
Determine the height of the preloader for the effect
if (queryloader.selectorpreload = = "Body") {
var height = $ (window). Height ();
} else {
var height = $ (queryloader.selectorpreload). Outerheight ();
}
The end animation and adjust to your likings
$ (Queryloader.loadbar). Animate ({
Height:height + "px",
top:0
}, "Linear", function () {
$ (queryloader.overlay). fadeout (800);
$ (Queryloader.preloader). Remove ();
});
}
}