js A thing about loading images onload_javascript skills

First let me clarify my purpose:

When the user enters the page, display the loading icon, wait for the largest image to load, and then opacity the image;

The function is very simple, but the trouble is, I didn’t fully complete it;

When doing it, I naturally thought of the following method for the first time:
　

Copy the code The code is as follows :

$(function(){
$('.banner img').load(function(){
console.log('already loaded')
} );
});

As the old saying goes, if your self-confidence is too inflated, it will be a huge blow in the end. I thought this was enough, so I looked it over and showed it to the boss. The boss clicked it twice and said that it would not be loaded. Loading transfer It just wouldn't come out. I said it shouldn't come out, and then I tried it myself, and it turned out to be true.

Then I searched for information and found that it was said to be the cause of caching, because when loading, the browser will not trigger the load event due to the cache; to no avail; I made a cruel move:

Copy code The code is as follows:

window.onload=function(){
console .log('Loaded')

};

Hehe, if this doesn’t work, I’ll give you a thumbs up; then my self-confidence is shattered again, so I bring it to the boss, who says it’s okay. The next day, the customer calls and says that the page is not loading, and the loading keeps going on and on. ; I answered him speechlessly: It should be that your Internet speed is too slow. . . You were waiting, and after a while he replied: This won’t work. Although it came out, the wait has been too long; can the time be shortened a little;

Helpless, I can only compress the pictures in various ways. After compressing, he still felt that it was not ideal; the boss said that this is ok, and now the project is just thrown into the space, which is very slow. If he network The speed is slow, and the loading time is naturally slow.

The boss said that’s what he said, but the task was still not completed. I was racking my brains and accidentally saw a carousel image jq plug-in on a foreign website. I went down and looked at the source code, and then the following trick was born:

Copy code The code is as follows:

var oImg = $('.banner img:eq( 0)');
oImg.attr('src') '?' (new Date()).getTime();
oImg.load(function(){
console.log('Already Loading')
});

After testing, it is normal. This means that when entering the page, add a time to the address of the image, so that there will be no cache every time it is loaded; and only one image is loaded, and one image is loaded. I won’t care about anything else after that;

After correction, I uploaded it without telling the boss; I didn’t dare to be careless this time, so I kept testing, and this time I found that the problem was no longer a problem;

Because the image path will be different every time when the page is loaded, it will be loaded every time, and the time consumed is the same as the first load; doesn’t that mean that it needs to be loaded once after entering it?

I’m dizzy......

After dozens of attempts, I finally found a way to defeat all the above methods:

Copy code The code is as follows:

function imgloading(){
console.log( 'Already loaded')
}
//Page call

This can solve the problem of image caching, and the load event will still be triggered; although I don’t understand this in detail; but I heard from others that this is still because of the page loading;

As we all know, web pages are loaded from top to bottom; when loading to img, I cannot get the img element in ready; when the page continues to load, after passing img, the current img represents Loading is complete. Since it is loaded, I think it is all loaded. Is it still useful to introduce load?

It is not difficult to see from the above method that when the page is loaded into img, it encounters the onload method, and it knows that this image must be loaded before it appears.

Okay. . . I don’t know if any colleagues have encountered this kind of problem and found a more perfect solution than this. . If you have a more perfect way, please be sure to leave a message and let me know. Thank you very much. I always feel that there is a better way. . .