jquery implementation picture preload:
We often encounter this problem when doing a website: a page has a large number of pictures resulting in slow page loading, often a white page user experience is very bad. So how do you solve this problem? Let me introduce a JS preload method that is often used in practical applications.
JS Code
?
| 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 The 25 26 | <!doctype html> |
Other instances
?
| 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; } } |
Parameter description:
Arr: It can be an array of image paths, or it can be a selected IMG jquery object;
Funloading: Each individual picture loaded after the completion of the operation performed;
Funonload: All pictures are loaded after the completion of the operation;
Funonerror: An action that occurs when a single picture is loaded.
Lazy load,
?
| 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: number of pictures loaded with errors; * * Console.log ("Loaded," +errors+ "Images loaded error!");} var funloading=function (n,total,src,obj) {/* N: Number of completed loads; Total: number of pictures to load; src: Current loading completed picture path; Obj: When the arr passed in the LOADIMG function is an array that holds the path of the picture, OBJ=SRC is the picture path, and 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+ "+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!");} |
Debugging use Cases
?
| 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); |
The above mentioned is the entire content of this article, I hope you can enjoy.
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
