Question

我正在使用以下测试网站上的Craftmap plugin：http://hhglobal.energycell.co.uk/locations/。

在静态全球地图下方，我有美洲，欧洲和亚太地区的标签，显示了Craftmap的实例。

这一切都适用于IE7或IE8的每个浏览器。出于某种原因，在这两个浏览器中单击选项卡时，它只显示预加载器图形，并且不会显示地图图像，即使图像可用且链接正确。

我想知道是否有人可能会有一些建议？似乎这两个浏览器只是因为某些奇怪的原因而不会加载地图图像。

我已经请求了插件开发人员的一些支持，但他现在似乎没有。：/

Answer 1

由于在IE7中缓存图像而导致此错误。如果图像缓存在IE7中，则jQuery load()方法不会触发，因此preload图像不会消失。

要解决此问题，您需要在标记中随机添加数据。

时间戳例如：

<div class="demo1">
    <img src="/assets/framework/world_map.jpg?23456897" class="imgMap" />
<!-- ... your code ... -->
<div class="demo2">
    <img src="/assets/framework/world_map.jpg?907784534235" class="imgMap" />
<!-- ... your code ... -->
<div class="demo3">
    <img src="/assets/framework/world_map.jpg?11123423535" class="imgMap" />
<!-- ... your code ... -->

请注意，如果您有相同的图像，则需要为图像添加3个不同的随机数。

或者您可以修改craftmap.js代码：

在init类中查找函数preloader：

init: function(){
    var img = new Image(),
        src = IMG.attr('src');
    P.preloader.create();
    $(img).addClass(S.image.name).attr('src', src).load(function(){
        var t = $(this),
            css = {
                width: this.width,
                height: this.height
            }
        t.css(css);
        IMG.remove();
        P.preloader.remove();
        S.preloader.onLoad.call(this, t, css);
    }).appendTo(C);
},

并将随机数据添加到图片src：

在：

$(img).addClass(S.image.name).attr('src', src).load(function(){

后：

$(img).addClass(S.image.name).attr('src', src + '?' + Math.random() * (new Date().getTime())).load(function(){

甚至更好：

如果您只需加载一张地图而不需要preload图片，则可以手动停用preload元素：

$('.preloader').remove();

在初始化所有init.js方法之后，在craftmap文件中

：

$('.demo3').craftmap({
image: {
    width: 2046,
    height: 925
},
    map: {
        position: '855 410'
    }
});
$('.preloader').remove(); // IE7 fix

IE7中Craftmap的问题

1 个答案: