0

次のテスト サイトでCraftmap プラグインを使用しています: http://hhglobal.energycell.co.uk/locations/。

静的なグローバル マップの下に、Craftmap のインスタンスを表示するアメリカ、ヨーロッパ、およびアジア太平洋のタブがあります。

これはすべて、IE7 または IE8 を除くすべてのブラウザーで正常に機能します。何らかの理由で、これらの両方のブラウザーでタブをクリックすると、プリローダーのグラフィックが表示されるだけで、画像が利用可能で正しくリンクされているにもかかわらず、マップ画像が表示されません。

誰かが何か提案があるのではないかと思っていましたか？これら 2 つのブラウザは、奇妙な理由でマップ イメージを読み込めないようです。

プラグインの開発者にサポートを依頼しましたが、現在対応できないようです。:/

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

image にランダムなデータを追加します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マップを 1 つしかロードしないため画像が不要な場合は、次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 に答える