Problems with Craftmap in IE7

Question

I'm using the Craftmap plugin on the following test site: http://hhglobal.energycell.co.uk/locations/ .

Beneath the static Global map I have tabs for Americas, Europe and Asia Pacific that show instances of the Craftmap.

This all works fine in every browser but IE7 or IE8. For some reason, in both of those browsers when you click on the tab it just shows the preloader graphic and won't show the map image, even though the image is available and linked correctly.

I was wondering if anyone might have some suggestions? It seems that those two browsers just won't load the map image for some strange reason.

I have requested some support from the developer of the plugin but he doesn't seem to be available right now. :/

Answer 1

This error caused because of caching images in IE7. jQuery load() method didn't fired if image cached in IE7 so preload image doesn't disappear.

To fix this you need to add randomly data to your images in markup.

Timestamp for example:

<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 ... -->

Note as you have same image you need to add 3 different random numbers to image.

Or you can modify craftmap.js code:

Find function init in preloader class:

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);
},

and add random data to image src :

Before:

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

After:

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

Or even better:

If you didn't need preload image as you load only one map you can disable preload element manually by adding:

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

in your init.js file after all craftmap methods initialized:

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