Loading javascript images-a solution for loading large charts

Loading javascript images-a solution for loading large charts

When a webpage loads a large image, it usually takes a long time to load it;

In addition, the image style cannot be properly controlled during the loading process, which may lead to misplacement and other display errors;

If you can use a smaller loading image placeholder when loading a large image, and then load a large image in the background, the bitmap will be automatically replaced after the large image is loaded,

This provides a better user experience;

Because I encountered such a requirement when developing an image viewer, I wrote an angular service to solve this problem. The effect is not bad;

Although it is an angular service, it can also be used independently to extract the core code;

To share the source code:

I:

    var imgloader = new Object();        imgloader.placeholder = new Image();

Imgloader is the main object

Placeholder is used to store placeholder Images

II:

        imgloader.init = function(placeholderPath,width,height){            imgloader.placeholder.src = placeholderPath;            imgloader.placeholder.width = width;            imgloader.placeholder.height = height;        }

Init is the initialization method of imgloader. It mainly specifies the size and height of a placeholder image file;

The purpose of setting the width and height is to layout the occupied bitmap when it is not loaded.

III:

Imgloader. load = function (imgElem, imgSrc, callback) {// clear the previous onload function if (imgElem. lastload) {imgElem. lastload. onload = function () {};} loadok = false; var testImg = new Image (); testImg. src = imgSrc; if (testImg. complete = true) {imgElem. src = testImg. src; imgElem. width = testImg. naturalWidth; if (imgElem. hasAttribute ("height") {imgElem. removeAttribute ("height") ;}} else {imgElem. src = imgloader. placeholder. src; imgElem. width = imgloader. placeholder. width; imgElem. height = imgloader. placeholder. height; // read-only attribute // imgElem. naturalWidth = imgElem. width; // imgElem. naturalHeight = imgElem. height; // console. log (imgElem. naturalWidth + "|" + imgElem. naturalHeight); // bind the onload function testImg. onload = function () {imgElem. src = testImg. src; imgElem. width = testImg. naturalWidth; if (imgElem. hasAttribute ("height") {imgElem. removeAttribute ("height") ;}if (callback) {callback () ;}}; imgElem. lastload = testImg; // imgloader. loadingArray. push (imgElem );}};

1. if multiple loads are set for the same image element at the beginning, only the last load takes effect and the previous load will be replaced;

2. Set an img using the src of the big image for testing. If the image has been loaded, set it directly;

3. Note that I have restored the width and height of the element to avoid being affected by the width and height of the element to be set;

4. Tips: After setting the width, if the height attribute is removed, the height will adapt to the width.

5. If testImg (large image) is not loaded, use the occupied bitmap instead. Note that the width and height of the set image are changed to the same size as the occupied bitmap;

6. Bind the onload function to testImg (large image). After the large image is loaded, replace the src of the Set element with the src of the large image and restore the frame height of the large image;

7. If callback is set, you can do something in the callback;

8. Set this imgElem to be bound to a large image (if it is bound again, this will be eliminated)

9. Tips: naturalWidth and naturalHeight are read-only attributes.

IV:

Example:

<Script src = "mikuImgLoader3.0.js"> </script> <script> imgloader. init ("dokidoki.gif", 200,200); imgloader. load (img1, "001.jpg"); imgloader. load (img2, "002.jpg"); </script>

We can also use css to control the size of the image to be set.

V:

Complete code:

 

// Miku image loader 3.0var imgloader = new Object (); imgloader. placeholder = new Image (); // imgloader. loadingArray = new Array (); imgloader. init = function (placeholderPath, width, height) {imgloader. placeholder. src = placeholderPath; imgloader. placeholder. width = width; imgloader. placeholder. height = height;}; imgloader. load = function (imgElem, imgSrc, callback) {// clear the previous onload function if (imgElem. lastload) {imgElem. lastload. onload = function () {};} var testImg = new Image (); testImg. src = imgSrc; if (testImg. complete = true) {imgElem. src = testImg. src; imgElem. width = testImg. naturalWidth; if (imgElem. hasAttribute ("height") {imgElem. removeAttribute ("height") ;}} else {imgElem. src = imgloader. placeholder. src; imgElem. width = imgloader. placeholder. width; imgElem. height = imgloader. placeholder. height; // read-only attribute // imgElem. naturalWidth = imgElem. width; // imgElem. naturalHeight = imgElem. height; // console. log (imgElem. naturalWidth + "|" + imgElem. naturalHeight); // bind the onload function testImg. onload = function () {imgElem. src = testImg. src; imgElem. width = testImg. naturalWidth; if (imgElem. hasAttribute ("height") {imgElem. removeAttribute ("height") ;}if (callback) {callback () ;}}; imgElem. lastload = testImg; // imgloader. loadingArray. push (imgElem) ;}}; // clear all onload functions of the load queue // function clearOnload (loadingArray) {// for (var I = 0; I
 
  
 
Zookeeper