Js an onload thing about images

  • 2020-03-27 00:09:45
  • OfStack

  First of all, let me clarify my purpose:

When users enter the page, showing loading loading ICONS, such as maximum load then opacity pictures;

It's a very simple function, but what hurts is that I didn't make it completely;

When doing it, I naturally thought of the following methods:


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

The familiar words say well, self-confidence is too inflated, in the end a great blow; I thought this is ok, and then after a look to the boss, the boss two points, said has not been loaded out, loading rotation is not out, I said should not ah, and then their own try, really so.

Then I looked for the data, and found that it was the reason for the cache, because when the load is loaded, the browser will be limited because the cache will not trigger the load event; No fruit; So I made a big move:


window.onload=function(){
    console.log(' Has been loaded ')

};

Hey hey, so still not line, I top you a lung; Then the confidence and dirty, to the boss, boss said yes, the next day, the customer called the page does not load, a loading has been rotating; I have no language of answer he say: should be you that network speed is too slow... You are waiting, after a while he replied: said this is not good, although out, but too long to wait; Can you make the time a little less;

But, I can only a variety of compressed pictures ah, after the pressure, he still feel not too ideal; The boss said that this is ok, now the project is just thrown on the space, the space was slow, if his network speed is slow, the loading time is slow.

The eldest brother say so say ah, the task still did not finish, rack one's brains, accidentally see a foreign website round spread graph jq plug-in, I looked at the source code, then the birth of the following tricks:


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

After testing, it is normal to add a time to the address of the image when entering the page, so that there is no cache for each load. And it just loads one graph, and then nothing else;

After the correction, also did not tell the boss on the spread up; This time I also dare not be careless, have been testing, this test found that the problem is not a problem;

Because the image path will be different every time when the page is loaded, it will be loaded every time, consuming the same time as the first load; Doesn't that mean you load every time you enter?

I am dizzy...

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


function imgloading(){
    console.log(' Has been loaded ')
}
//Page calls
<img src="1.jpg" onload="imgloading();"/>

So that you can get rid of the image cache, and still trigger the load event; I don't really understand that yet; But according to others, it's still because the page loads;

Web pages are known to load from the top down; When I load it into img, I get the img elements in ready that I can't get; When the page continues to load, after the img, the current img means that the load is finished, since the load is finished, I think it is all loaded, a load is still useful?

The above method is not difficult to see, when the page son loaded into img met the onload method, it knows that the image must be loaded before it appears.

Okay... I don't know if there is a peer encountered Ben helpless pain such things, whether to find a more perfect solution than this. If you have a more perfect way, please be sure to leave a message to let me know, thanks a million, I always feel there is a better way...


Related articles: