web-dev-qa-db-ja.com

jQueryを使用して画像のsrc属性を変更すると、Chrome / Operaで常に適用されるとは限りません

私のウェブサイトで写真の小さな高解像度部分を取得するために使用される次のコードがあります。購入するかどうかを決める前に、オリジナルの品質を垣間見ることができるようにするというアイデアは次のとおりです。

$('#magviewplus').attr('src', '/photos/original-snippet.php?id=<?php echo $nID?>&x='+left+'&y='+top).load(function() {
    window.clearInterval(maginterval);
    magtimer=3;
    maginterval=window.setInterval(magViewCountdown,1000);
    $('#clicktoenhance').html('Exiting in '+magtimer+'s...');
});

どういうわけか、断続的です。 Fiddlerは、スニペットが常に読み込まれることを示していますが、表示されるのはたまにしかありません。表示されない場合でも、load（）イベントのコードは問題なく実行されます。

したがって、ロードされていると見なされ、Fiddlerはロードされていることを示しますが、約50％の時間、実際には本来あるべき場所に表示されません。

自宅のデスクトップでは発生することが少なく、外出中はラップトップで発生する傾向があるので、リソースの読み込みが少し遅いことがあるのではないかと思います...？

何か案は？

編集：これは実際にはChrome＆Operaに限定されているようです。Firefox/ IE11では正常に動作します

jqueryimagesrc
19
Codemonkey

次の投稿から明らかなように、問題は十分に文書化されているようです。

  1. srcを変更するときの画像ロード時のjqueryコールバック

  2. ソースを動的に変更する画像のロードイベントをキャプチャする

  3. 画像の読み込み時のjQueryコールバック（画像がキャッシュされている場合でも）

新しいイメージをメモリにロードし、この新しいイメージのロードイベントが発生したら、実際のイメージのsrcを変更して、他に必要なことをすべて実行することをお勧めします。元の画像はそのまま残り、それに添付されている他のイベント（ロード以外）はそのまま残ります。

$(new Image()).attr('src', '/photos/original-snippet.php?id=<?php echo $nID?>&x=' + left + '&y=' + top).load(function() {
    $('#magviewplus').attr('src', this.src);
    window.clearInterval(maginterval);
    magtimer = 3;
    maginterval = window.setInterval(magViewCountdown,1000);
    $('#clicktoenhance').html('Exiting in ' + magtimer + 's...');
});

[〜＃〜]デモ[〜＃〜]

3
PeterKA

これが機能しないことを示すために編集されました...

最初は、実用的な「解決策」は画像を削除して再度追加することであるように思われました。

<div id="magviewholder"><img id="magviewplus" src="pixel.gif" alt=""></div>

そのようです：

$('#magviewholder').children("img").remove()
$('#magviewholder').append('<img>');

$('#magviewholder>img').attr('onerror','imgError(this)').attr('id','magviewplus').attr('src', '/photos/original-snippet.php?id=<?php echo $nID?>&x='+left+'&y='+top).load(function() {
     window.clearInterval(maginterval);
     magtimer=3;
     maginterval=window.setInterval(magViewCountdown,1000);
     $('#clicktoenhance').html('Exiting in '+magtimer+'s...');
 });

これは最初はすべてのブラウザで機能するように見えましたが、現在は同じように断続的になっているようです...

5
Codemonkey

Image onload イベントを使用できます。

このイベントハンドラーは、画像の読み込みが完了すると、画像要素で呼び出されます。

コード

var url = '/photos/original-snippet.php?id=<?php echo $nID?>&x='+left+'&y='+top;

var img = new Image();

img.onload = function () { 
    //When load's sucessfully
    $('#magviewplus').prop('src', url); 

    window.clearInterval(maginterval);
    magtimer=3;
    maginterval=window.setInterval(magViewCountdown,1000);
    $('#clicktoenhance').html('Exiting in '+magtimer+'s...');
};

img.onerror = function () { 
    //When load's fails
}; 

img.src = url; //Set URL
1
Satpal

.load（）を使用してイメージをロードします。

$('#magviewplus').load('/photos/original-snippet.php?id=<?php echo $nID?>&x='+left+'&y='+top, function() {
    window.clearInterval(maginterval);
    magtimer=3;
    maginterval=window.setInterval(magViewCountdown,1000);
    $('#clicktoenhance').html('Exiting in '+magtimer+'s...');
});
0
Brijesh Bhatt