Question

I’m writing a javascript function that waits until all the images are loaded on a webpage and then it modifies their width to fit them into a box. It works like a charm on Chrome (clientWidth is 0 until the image is loaded) but on Firefox it instantly goes some tiny number (in my case 24 instead of ~700) so the actual shrinking part happens before the images is loaded (so it stays at the same size). Any fix ideas ?

  function shrink() {
            var images = document.getElementsByTagName("img");
            var interval = setInterval(function() {
                var exit = 0;
                for (var i = 0; i < images.length; ++i) {
                    if (images[i].clientWidth != 0) exit += 1;
                }
                if(exit == images.length ) {
                    clearInterval(interval);
                    for (var i = 0; i < images.length; ++i) {
                        if(images[i].clientWidth > 600) images[i].style.width = 400;
                    }
                }
            },100);
        }

Answer 1

Instead of checking the clientWidth (which depends on whether the alt text or broken image icon is showing, say), use images[i].complete to determine whether the image is loading.