如果没有setTimeout,ImagesLoaded不适用于Firefox

时间:2014-07-29 17:43:06

标签: javascript firefox imagesloaded

为什么我要求图像的超时至少300毫秒才能在Firefox上运行?如果我设置得更少,imagesLoaded事件会在图像加载之前立即触发。我使用的是最新版本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>

1 个答案:

答案 0 :(得分:1)

在此库的文档中,作者以不同的方式使用它(here)。 问题可能是库启动时,在页面加载时,可能不清楚。 我不认为你应该使用图书馆来制作一张图片。你可以在头脑中添加这个

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

然后在身体负荷上附上你的事件,如下:

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

这对图像加载错误无效。