javascript - How does the browser know if an image is loaded? -

After loading a large image on the page, I should say the function. I have tried a few different solutions which I have found here and on the web, but no one is fit or works. The one that I have tried here is most understandable ... and it is using jQuery Is

  var imgs = $ ('# bgStage img.bg'), imgCnt = imgs.length, cnt = 0; Imgs.load (function () {cnt ++; if (imgCnt === cnt) {homeSlider ();}}) Each (function () {if (this.complete) {$ (this) .trigger ('load');}});  

This does not wait until img.bg loads. The Home Slider () function is called and is started because the image is still loading still.

So, I'm thinking how a browser determines how an image loads? Can it read the width and height? Because I am defining width and height in CSS for the image so that it can be applied as a fixed size.

If someone has any information about whether the load event takes place for the image, it would be great! Thank you.

You can always check $ ('IMG'). Length ();