Javascript-based image preload _ javascript

This article mainly introduces the method of javascript image pre-loading. The example analyzes the idea of how javascript achieves image pre-loading, which has some reference value. If you need it, you can refer to it. I. Definition
Pre-loading images is a good way to improve user experience. users need to attach images in advance to ensure fast and seamless publishing of images, so that users can enjoy a better user experience when using browsers. It is often used in image galleries and other applications.
[Note]If you use instant loading, loading images together with other content increases the overall loading time of the page. Therefore, it is more appropriate to use window. onload.
2. Two ideas
1. Use background images
Pre-load background images with useless page elements

Load Image
 
 
  
  
  
  
  
  
  
  
  
  
  
  

 
 
Script var oBtn = document. getElementsByTagName ('click') [0]; var oImg0 = document. images [0]; var array = ["img/img1.gif", "img/img2.gif", "img/img3.gif", "img/img4.gif"] var iNow =-1; oBtn. onclick = function () {iNow ++; iNow = iNow % 4; oImg0.src = array [iNow];} function preLoadImg () {preload1.style. background = "url ('img/img1.gif ')"; preload2.style. background = "url ('img/img2.gif ')"; preload3.style. background = "url ('img/img3.gif ')"; preload4.style. background = "url ('img/img4.gif ')";} window. onload = function () {preLoadImg ();} script

2. Use Image ()
Use new Image () or document. createElement ('img ') to create a tag, and then use the src value assignment statement to load the Image.

Load ImageScript var oBtn = document. getElementsByTagName ('click') [0]; var oImg0 = document. images [0]; var array = ["img/img1.gif", "img/img2.gif", "img/img3.gif", "img/img4.gif"] var iNow =-1; oBtn. onclick = function () {iNow ++; iNow = iNow % 4; oImg0.src = array [iNow];} var aImages = []; function preLoadImg (array) {for (var I = 0, len = preLoadImg. arguments [0]. length; I <len; I ++) {aImages [I] = new Image (); aImages [I]. src = preLoadImg. arguments [0] [I] ;}} window. onload = function () {preLoadImg (array);} script

Iii. onload event
The onload event of the image can be used to determine whether the image is actually loaded, and a series of operations on the image may be performed in the future, such as obtaining the actual width and height of the current image and indexing.
[NOTE 1] The src Assignment Statement of the image must be placed behind the onload event of the image. Otherwise, the image has been loaded but the event binding has not been completed.

Load ImageScript var oBtn = document. getElementsByTagName ('click') [0]; oBtn. onclick = function () {preLoadImg ('img/test.png ');} function preLoadImg (url) {var oImg = document. createElement ('img '); // in the local environment, the img onload event in IE8-browser cannot be loaded after src. src = url; oImg. onload = function () {document. body. appendChild (oImg); oImg. onload = null; oImg = null;} script

[NOTE 2] The onload attribute of an Image object references an anonymous function object, and an anonymous function references an Image object through its scope. This circular reference may cause memory leakage in IE6. Therefore, circular references should be removed.
[Recursive writing]

 DocumentLoad ImageScript var oBtn = document. getElementsByTagName ('click') [0]; var oImg0 = document. images [0]; var array = ["img/img1.gif", "img/img2.gif", "img/img3.gif", "img/img4.gif"] var iNow =-1; oBtn. onclick = function () {iNow ++; iNow = iNow % 4; oImg0.src = array [iNow];} var oImg = document. createElement ('img '); var iDown = 0; preLoadImg (); function preLoadImg () {oImg. onload = function () {iDown ++; alert ('dide' + iDown + 'image width: '+ this. width + 'height: '+ this. height); if (iDown <array. length) {preLoadImg ();} else {oImg. onload = null; oImg = null;} oImg. src = array [iDown];} script

[More comprehensive onerror writing]

 DocumentLoad ImageScript var oBtn = document. getElementsByTagName ('click') [0]; var oImg0 = document. images [0]; var array = ["img/img1.gif", "img/img2.gif", "img/img3.gif", "img/img4.gif"] var iNow =-1; oBtn. onclick = function () {iNow ++; iNow = iNow % 4; oImg0.src = array [iNow];} var iDown = 0; var oImage = new Image (); function preLoadImg (arr) {function loadImgTest (arr) {iDown ++; if (iDown <arr. length) {preLoadImg (arr);} else {alert ('OK'); oImg. onload = null; oImg = null;} oImage. onload = function () {loadImgTest (arr) ;}; oImage. onerror = function () {loadImgTest (arr) ;}; oImage. src = arr [iDown];} preLoadImg (array); script

[Circular writing]

 DocumentLoad ImageScript var oBtn = document. getElementsByTagName ('click') [0]; var oImg0 = document. images [0]; var array = ["img/img1.gif", "img/img2.gif", "img/img3.gif", "img/img4.gif"] var iNow =-1; oBtn. onclick = function () {iNow ++; iNow = iNow % 4; oImg0.src = array [iNow];} function preLoadImg (arr, callback) {var aImages = []; var iDown = 0; for (var I = 0; I <arr. length; I ++) {aImages [I] = new Image (); aImages [I]. onload = function () {loadImgTest (arr, callback) ;}; aImages [I]. onerror = function () {loadImgTest (arr, callback) ;}; aImages [I]. src = arr [iDown];} function loadImgTest (arr, callback) {iDown ++; if (iDown = arr. length) {alert ('OK'); callback & callback. call (aImages) ;}}} preLoadImg (array, function () {console. log (this [0]. width) ;}); scriptApplication: pre-load fuzzy clear
 DocumentLoad ImageScript var oBtn = document. getElementsByTagName ('click') [0]; var oImg0 = document. images [0]; var arrayB = ["img/img1.gif", "img/img2.gif", "img/img3.gif", "img/img4.gif"]; var arrayL = ["img/img1.jpg", "img/img2.jpg", "img/img3.jpg", "img/img4.jpg"]; var iNow =-1; oBtn. onclick = function () {iNow ++; iNow = iNow % 4; oImg0.src = arrayL [iNow]; aftLoadImg (arrayB, oImg0);} var aImages = []; window. onload = function () {preLoadImg (arrayL);} function preLoadImg (arr) {for (var I = 0, len = arr. length; I <len; I ++) {aImages [I] = new Image (); aImages [I]. src = arr [I] ;}} function aftLoadImg (arr, obj) {var oImg = new Image (); oImg. onload = function () {obj. src = arr [iNow];} oImg. src = arr [iNow];} script

I hope this article will help you design javascript programs.