Jquery implements image pre-loading and delayed loading, and jquery implements delayed loading.

Jquery implements image pre-loading and delayed loading, and jquery implements delayed loading.

This article describes how Jquery implements image pre-loading and delayed loading. Share it with you for your reference. The specific analysis is as follows:

There are many projects that often need to determine whether to perform the corresponding operations after the image is loaded, or the image loading needs to be delayed. Although there are already good plug-ins on the internet, however, if you have to load a plug-in separately for these effects, you may feel a little uncomfortable. You just wrote a method yourself:
Copy codeThe Code is as follows: 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;
}
}
Parameter description:

Arr: it can be an array storing the image path, or the jquery object of the selected img;
FunLoading: The operation performed after each individual image is loaded;
FunOnLoad: operation after all images are loaded;
FunOnError: operation when an error occurs during image loading.

For example:
Copy codeThe Code is as follows: var imgonload = function (errors ){
/* Errors: number of images with errors loaded ;*/
Console. log ("loaded," + errors + "images loaded error! ");
}
 
Var funloading = function (n, total, src, obj ){
/*
N: Number of loaded instances;
Total: total number of images to be loaded;
Src: Path of the currently loaded image;
Obj: when the input arr in the loadimg function is an array storing the image path, obj = src is the image path,
When arr is a jquery object, obj is the currently loaded img dom object.
*/
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! ");
}
Call example:
Copy codeThe Code is as follows: console. log ("loading ...");
Loadimg ($ ("img"), funloading_obj, imgonload, funOnError );
/* Loadimg (["http://pic22.nipic.com/20120619/9607634_212642465144_2.jpg ",
"/20120531/1670912 _103610084349_2.jpg ",
"/20120616/4952071 _130629530136_2.jpg ",
"/20120610/1723580 _105037029000_2.jpg ",
Http://pic22.nipic.com/20120617/2572038_125013326121_2.jpg"
], Funloading, imgonload, funOnError );*/
The above is the original style. Next we will introduce a jQuery plug-in based on Lazy Load that delays image loading.

Lazy Load depends on jQuery. Add the following code to the head area of the page:
Copy codeThe Code is as follows: <script src = "jquery. js" type = "text/javascript"> </script>
<Script src = "jquery. lazyload. js" type = "text/javascript"> </script>
You must modify the HTML code. set the booth operator image in the src attribute. The demo page uses 1x1 pixel gray GIF image. in addition, you need to set the URL of the real image to the data-original attribute. A specific class can be defined here to obtain the image object to be loaded with delay. in this way, you can easily control plug-in binding.
Copy codeThe Code is as follows:
The image processing code is as follows.
Copy codeThe Code is as follows: $ ("img. lazy"). lazyload ();
This will delay loading of all images whose classes are lazy. For details, refer to the basic options demo.

Set Sensitivity

JavaScript is activated in almost all browsers. however, you may still want to display real images on clients that do not support JavaScript. when the browser does not support JavaScript, you can use the <noscript> label to write the actual image fragments.
Copy codeThe Code is as follows:
<Noscript> </noscript>
You can use CSS to hide placeholders.
Copy codeThe Code is as follows:. lazy {
Display: none;
}
In browsers that support JavaScript, you must display the placeholder During DOM ready, which can be completed at the same time as the plug-in initialization.
Copy codeThe Code is as follows: $ ("img. lazy"). show (). lazyload ();
These are optional, but you should do this if you want the plug-in to downgrade smoothly.

Set Sensitivity

By default, the slice will be loaded when the screen is displayed. If you want to load the image in advance, you can set the threshold option and set the threshold to 200 so that the image will be loaded in advance when it is 200 pixels away from the screen.
Copy codeThe Code is as follows: $ ("img. lazy"). lazyload ({threshold: 200 });

Placeholder Image

You can also set a placeholder image and define an event to trigger the loading action. in this case, you need to set a URL for the placeholder image. transparent, gray, and white 1x1 pixel images are included in the plug-in.

Event trigger Loading

Events can be any jQuery time, such as click and mouseover. you can also use custom events, such as sporty and foobar. by default, the system is waiting until the user rolls to the location of the window. you can disable image loading before the gray placeholder image is clicked:
Copy codeThe Code is as follows: $ ("img"). lazyload ({
Placeholder: "img/grey.gif ",
Event: "click"
});
Use special effects

When the image is fully loaded, the ins use the show () method by default to display the image. in fact, you can use any special effects you want to use. the following code uses the FadeIn effect. this is the demo page.
Copy codeThe Code is as follows: $ ("img. lazy"). lazyload ({
Effect: "fadeIn"
});
Picture in Container

You can use the plug-in on the image of the scroll container, such as the DIV element with a scroll bar. all you need to do is define the container as a jQuery object and upload it to the initialization method as a parameter. this is a horizontal and vertical scrolling demo page.
Copy codeThe Code is as follows: # container {
Height: 600px;
Overflow: scroll;
}
$ ("Img. lazy"). lazyload ({
Container: $ ("# container ")
});
When images are not arranged in sequence

When you scroll through a page, Lazy Load cyclically loads images. check whether the image is in the visible area in a loop. by default, the loop is stopped when the first image is not visible. images are regarded as stream distribution. The order of images on the page is the same as that in HTML code. however, in some la s, such assumptions are not true. however, you can use the failurelimit option to control the loading behavior.
Copy codeThe Code is as follows: $ ("img. lazy"). lazyload ({
Failure_limit: 10
});
Set failurelimit to 10 so that the plug-in can find 10 images that are not in the visible area to stop searching. If you have a complicated layout, set this parameter a little higher.

Delayed image loading

Lazy Load is an incomplete function of the plug-in, but it can also be used for delayed image loading. the following code implements page loading and then loading. after the page is loaded for 5 seconds, images in the specified area are automatically loaded. this is the demo page for delayed loading.
Copy codeThe Code is as follows: $ (function (){
$ ("Img: below-the-fold"). lazyload ({
Event: "sporty"
});
});
$ (Window). bind ("load", function (){
Var timeout = setTimeout (function () {$ ("img. lazy"). trigger ("sporty")}, 5000 );
});
Load hidden images

You may have hidden images on your page. for example, if the plug-in is used to filter the list, you can constantly modify the display status of each item in the list. to improve performance, Lazy Load ignores hidden images by default. if you want to load a hidden image, set skip_invisible to false.
Copy codeThe Code is as follows: $ ("img. lazy"). lazyload ({
Skip_invisible: false
});

I hope this article will help you design javascript programs.