ImagesLoaded does not work with Firefox without setTimeout

699 Views Asked by huevos de oro At 04 April 2025 at 16:42

Any ideas why I require a timeout of at least 300ms for imagesLoaded to work on Firefox? If I set it any less, the imagesLoaded event fires immediately before the image has loaded. I am using the latest version 3.1.x.

<html>
    <script src="bower_components/jquery/jquery.min.js"></script>
    <script src="bower_components/imagesloaded/imagesloaded.pkgd.js"></script>
<head>
</head>
<body>
    <div id=myimage><img style="height:100px" src="http://www.worldcarwallpapers.com/wp-content/uploads/2013/07/new-2014-audi-r8-wallpaper.jpg"/></div>
    <script>
        $(document).ready(function(){
            setTimeout(function(){
                var elem = $("#myimage");
                elem.imagesLoaded(function(){
                    alert("ready!!")
                });
            }, 100)
        })
    </script>
</body>
</html>

Original Q&A

There are 1 best solutions below

GramThanos On 29 July 2014 at 18:12

In the documentation of this library, author use it in a different way (here). The problem is probably when the library starts, on page load maybe, its not clear. I don't think you should use a library for one image. You can add this in your head

<script>
HTMLImageElement.prototype.imageLoaded = function(callback){
    if(this.complete && this.naturalWidth>0){
        callback();
    }else{
        this.addEventListener('load', callback, false);
    }
};
</script>

And then on body load attach your event, like this:

$(function(){
    var elem = document.getElementById("myimage");
    elem.imageLoaded(function(){
        alert("ready!!")
    });
});

This will not work on an image load error.

ImagesLoaded does not work with Firefox without setTimeout

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in FIREFOX

Related Questions in IMAGESLOADED

Trending Questions

Popular # Hahtags

Popular Questions