Search code examples
javascriptpreloader

Why console.log shows me that there are 0 loaded images in the html document?

I have been making preloader based on counting images in the html document according to one youtube tutorial.

I got stuck and don't understand why console.log command says that the amount of loaded images is 0, though I have some images in the html document.

I have made the codesandbox so that one could easily see the code: https://codesandbox.io/s/preloader-mip2o?file=/app.js

Thank you for your help!

Solution

  • It happens, because JavaScript works asynchronously. I've added 1 line to image_loaded function:

    function image_loaded() {
  alert("In image_loaded")
  images_loaded_count++;
...

    After that I run it in browser and see that console.log is called before images are actually loaded.