0

開発中のモバイル サイト用のイメージ ギャラリー jQuery プラグインを作成しました。ギャラリーの各画像には、低解像度と高解像度があります。

ギャラリーは全画面表示され、各画像には最初に低解像度画像が取り込まれます。ユーザーが特定の画像を左右にスワイプすると、高解像度の画像を静かに読み込み始め、完了したら低解像度と交換したいと考えています。

現在、これは iOS と Android で動作していますが、Windows Phone 8 では高解像度画像の onload イベントが発生していないように見えるため、スワップは発生しません。

コード：

var image = images[images_i];
if (image.$el && image.full && image.$el.attr('src') != image.full) {
    var fullImage = new Image();
    fullImage.onload = function () {
        image.$el.attr('src', image.full);
    };
    fullImage.src = image.full;
}

(ギャラリーは、各画像 URL、jQuery オブジェクト、メタデータなどを含む「画像」ハッシュを生成します)

また、最初は実際に新しい隠し画像を DOM に挿入し、jQuery を使用して load イベントにバインドしようとしました。ただし、画像が既にキャッシュされている場合、これは一貫して起動しないことがわかったので、$image.prop('complete') の別のチェックを追加する必要がありました。これにより、WP8でも同じ結果が得られました。

4

1 に答える 1

0

どうやら私は最初の試みで本当に近づいていたようですが、物事の順序を間違えるというミスを犯しました. この問題について SO で見たすべての回答には、画像の onload イベント処理のみが含まれていましたが、IE が既に画像をキャッシュしている場合、このイベントは発生しないという事実は考慮されていませんでした。

完全なソリューション:

var fullImage = new Image();
fullImage.onload = function () {
    $img.attr('src', fullImageUrl);
};
fullImage.src = image.full;
if ($(fullImage).prop('complete') {
    $img.attr('src', fullImageUrl);
}

画像が既にキャッシュされている場合、$(fullImage).prop('complete') は true を返します。

于 2013-02-21T17:37:48.783 に答える