Question

我一直在使用以下预加载脚本来加载所有图像，然后切换两个div显示设置，以防止用户看到网站“放在一起”。问题是，当然，IE 8和拒绝切换。我已经查看了几个预加载器问题和这样的错误，它们都引用了缓存，但我还没有找到一个实际的修复...任何帮助将不胜感激。这是代码：

扩展名：

(function($) {
var imgList = [];
$.extend({
    preload: function(imgArr, option) {
        var setting = $.extend({
            init: function(loaded, total) {},
            loaded: function(img, loaded, total) {},
            loaded_all: function(loaded, total) {}
        }, option);
        var total = imgArr.length;
        var loaded = 0;

        setting.init(0, total);
        for(var i in imgArr) {
            imgList.push($("<img />")
                .attr("src", imgArr[i])
                .load(function() {
                    loaded++;
                    setting.loaded(this, loaded, total);
                    if(loaded == total) {
                        setting.loaded_all(loaded, total);
                    }
                })
            );
        }

    }
});
})(jQuery);

调用它的代码：

$(function() {
<? if ($dir = opendir('images')) {
        $images = array();
        while (false !== ($file = readdir($dir))) {
            if ($file != "." && $file != "..") {
                $images[] = $file; 
            }
        }
        closedir($dir);
        foreach($images as $image) {
            if(stristr($image, '.')) 
            $preload .= "'images/".$image."',";
        }
        $preload = substr($preload, 0, -1);
    }?>

    $.preload([<?=$preload?>], 
    {
        loaded_all: function(loaded, total) {
            $('#main_loading').css('display', 'none');
            $('#container').css('display', 'block');
        }
    });

});

我忘记了我最初发现这段代码的地方，但是为了满足我的需要而稍微修改了一下。我们的开发网站可以看到：http://www.branninggroup.com/backbeat/media_player/

我进行了临时修复，因此它在IE中部分工作，在显示之前强制等待10秒，但显然可以知道图像何时加载以显示页面....任何提示/建议将不胜感激。

Answer 1

该插件出错了，其中一个与IE和load事件的问题有关。

您需要定义load事件，然后设置src属性/属性。

尝试将其替换为......

(function($) {
var imgList = [];
$.extend({
    preload: function(imgArr, option) {
        var setting = $.extend({
            init: function(loaded, total) {},
            loaded: function(img, loaded, total) {},
            loaded_all: function(loaded, total) {}
        }, option);
        var total = imgArr.length;
        var loaded = 0;

        setting.init(0, total);
        for (var i = 0; i < total; i++) {
            imgList.push($("<img />")
                .load(function() {
                    loaded++;
                    setting.loaded(this, loaded, total);
                    if(loaded == total) {
                        setting.loaded_all(loaded, total);
                    }
                })
                .attr("src", imgArr[i]);

            );
        }

    }
});
})(jQuery);

我还将for (in)循环更改为正常的for循环。你不想挖掘prototype链。您也可以使用$.each()。

jquery预加载器插件不能在IE 8及以下版本中运行...

1 个答案: