0

我在以下测试站点上使用Craftmap 插件： http ://hhglobal.energycell.co.uk/locations/ 。

在静态全球地图下方，我有美洲、欧洲和亚太地区的选项卡，其中显示了工艺地图的实例。

这在除 IE7 或 IE8 之外的所有浏览器中都可以正常工作。出于某种原因，在这两个浏览器中，当您单击选项卡时，它只会显示预加载器图形，不会显示地图图像，即使图像可用且链接正确。

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

我已请求插件开发人员提供一些支持，但他现在似乎不可用。：/

4

1 回答 1

2

此错误是由于在 IE7 中缓存图像引起的。load()如果图像缓存在 IE7 中，则不会触发jQuery方法，因此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
于 2012-05-17T17:13:07.383 回答