This article shows you how to use jquery to preload a picture in an instance tutorial, and you can also make a nice jquery preload picture effect based on it.
<!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 Pre-loading picture effect plugin and example </title><body>
Discover a tutorial on picture loading using Ray Sharp's written jquery while trying to create the same functionality for the company I worked on in the morning. Remy has released the core script, and here I will modify it to make it work with multiple pictures and load in sort order.
Load multiple Images
First, we create an HTML page, which has a list of class "load elements" that we are going to define in the CSS tutorial after the number of elements in the list depends on how much image we need to put in this example I'm here, there are 3 images<ul id= "Portfolio" >
<li class= "Loading" ></li>
<li class= "Loading" ></li>
<li class= "Loading" ></li>
</ul>Next, we add the "Load" class containing animated GIF animations for the shipping animation, CSS.
<style type= "Text/css" >
Ul#portfolio {margin:0; padding:0;}
Ul#portfolio li {float:left; margin:0 5px 0 0; width:250px; height:250px; List-style:none; }
Ul#portfolio li.loading {background:url (spinner.gif) No-repeat Center Center;
</style>
Here is the web effects, I have made some comments, which illustrate what the Block code thing. Don't forget these block lines loaded before the jquery core file
<script>
Dom Ready
$ (function () {Image source
var images = new Array ();
Images[0] = ' yun_qi_img/2805001285_4164179461_m.jpg ';
Images[1] = ' yun_qi_img/2801920553_656406f2dd_m.jpg ';
IMAGES[2] = ' yun_qi_img/2802705514_b7a0ba55c9_m.jpg ';Loop through matching element
$ ("Ul#portfolio Li"). each (function (Index,el) {
New Image Object
var img = new Image ();
Image onload
$ (IMG). Load (function () {
Hide A
$ (this). CSS (' Display ', ' none '); Since. Hide () failed in Safari
//
$ (EL). Removeclass (' Loading '). Append (this);
$ (this). Fadein ();
}). Error (function () {
$ (EL). Remove ();
}). attr (' src ', images[index]);
});});
</script>You can see what we do in the preview so far here
Create an element programmaticaly
Because sometimes we don't know how many pictures will be added there, so it's better if we let code to create our own elements, such as need a lot. First let's change the HTML code and the Child left the American UL, no loneliness
<ul id= "Portfolio" ></ul>JS Code
<script>
Loop through images
$ (images). Each (function (index,value) {
Create the Li programatically
var list = $ (' <li id= ' portfolio_ ' +index+ ' "></li> '). attr (' class ', ' loading ');
Append the new Li to UL
$ (' Ul#portfolio '). Append (list);
Current Li Object
var Curr = $ ("Ul#portfolio li#portfolio_" +index);
New Image
var img = new Image ();
Load image
$ (IMG). Load (function () {
$ (this). CSS (' Display ', ' none '); Since. Hide () failed in Safari
$ (Curr). Removeclass (' Loading '). Append (this);
$ (this). Fadein ();
}). Error (function () {
$ (Curr). Remove ();
}). attr (' src ', value);
});
</script>
Please tell me what's the difference? And in the first part of the loop is based on the matching elements that load the index of the array elements, where the loop image is based on the image array and created for Zu programmaticaly all, and then loads itself into the new Lee element.Here is the preview
Sequence image loading
In these two examples are all previous images loaded almost at the same time, and now we will load the next image after it has previously only loaded or cannot load (error).The following is an HTML block:
<div id= "wrapper" ></div>
Js
<script>
Dom Ready
$ (function () {
Image sources
var images = new Array ();
Images[0] = ' yun_qi_img/2805001285_4164179461_m.jpg ';
Images[1] = ' yun_qi_img/2801920553_656406f2dd_m.jpg ';
IMAGES[2] = ' yun_qi_img/2802705514_b7a0ba55c9_m.jpg ';
Images length
var max = $ (images). length;
At least 1 image exist
if (max>0)
{
Create the UL element
var ul = $ (' <ul id= ' portfolio "></ul> ');
Append to Div#wrapper
$ (UL). Appendto ($ (' #wrapper '));
Load the
LoadImage (0,max);
}function of loading image
Params: (int) Index of image in array, (int) length of images array
function LoadImage (Index,max)
{
If current index is lower then max Element (max-1)
if (Index<max)
{
Create the Li, add loading class
var list = $ (' <li id= ' portfolio_ ' +index+ ' "></li> '). attr (' class ', ' loading ');
Append to UL
$ (' Ul#portfolio '). Append (list);
Current Li
var Curr = $ ("Ul#portfolio li#portfolio_" +index);
New Image Object
var img = new Image ();
Image onload
$ (IMG). Load (function () {
$ (this). CSS (' Display ', ' none '); Since. Hide () failed in Safari
$ (Curr). Removeclass (' Loading '). Append (this);
$ (this). Fadein (' Slow ', function () {
Once the current loaded, trigger the next image
LoadImage (Index+1,max);
});
}). Error (function () {
On Error Remove current
$ (Curr). Remove ();
Trigger the next image
LoadImage (Index+1,max);
}). attr (' src ', images[index]);
}
}});
</script>
What are the changes we have made? , we completely changed the way the load was made. Here, we use the function "LoadImage" to load one of the images based on the parameter indices of the image.
<script>
if (max>0)
{
Create the UL element
var ul = $ (' <ul id= ' portfolio "></ul> ');
Append to Div#wrapper
$ (UL). Appendto ($ (' #wrapper '));
Load the
LoadImage (0,max);
}$ (this). Fadein (' Slow ', function () {
LoadImage (Index+1,max);
});
</script></body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
