javascript - IE7中的Craftmap问题

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

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

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

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

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

最佳答案

由于在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