1

今日、さまざまな画像を単純なギャラリーにロードするアルゴリズムを開発しました。スクリプトは、画像を「バッファリング」するための画像タグを作成しています。次に、JQuery を使用して、イメージの読み込みが完了したかどうかを判断します。もしそうなら、それは私のloading_animation.gifを隠し、画像タグを削除し、背景画像として設定された画像でdivタグを表示します。基本的には、img タグを使用して JQuery の .load() 関数を使用できるようにしています。div タグは、画像を適切に表示するために使用されます。

私の質問は次のとおりです。画像はネットから 2 回読み込まれますか、それともブラウザによってキャッシュされますか? スクリプトの動作を確認したところ、画像がキャッシュされたように見えましたが、常にそうなのでしょうか? キャッシングを無効にすると、画像が 2 回読み込まれるのではないでしょうか?

これが私のコードです：

CSS

.imagewrapper .imageholder {
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    float: left;
    overflow: hidden;
    display: none;
}
.imagewrapper .loading_animation {
    width: 150px;
    height: 150px;
    background-image: url(versuchsordner/img/loading_anim.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    float: left;
}
.image_preloader {
    display: none;
}

JQuery

$(document).ready(function() {

    $('.imagewrapper .image_preloader').load(function() {

        $(this).siblings('.loading_animation').fadeOut(function() {
            $(this).siblings('.image_preloader').remove();
            $(this).siblings('.imageholder').fadeIn();
        });
    });         
});

PHP/HTML

<div id="gallery">
        <?php
        $parser = new Parser("","basti",25);
        $entry_id = 87;
        $album = $parser->selectAlbumByEntryId($entry_id, "all");
        foreach ($album->pictures as $picture) {
            ?>
            <div class="imagewrapper">
                <img class="image_preloader" src="<?php echo $picture->originalPath; ?>" />
                <div class="imageholder" style="background-image:url('<?php echo $picture->originalPath; ?>');"></div>
                <div class="loading_animation"></div>
            </div>
            <?php
        }
        ?>
</div>
4

2 に答える 2

0

私の意見では、それは最善のアプローチではないと思います。

画像をプリロードするのが好きな場合 (これは非常にトリッキーな場合があります)、JS を使用して宣言する必要があります。

var img1023 = new Image();

人々がキャッシュを無効にすると、サーバーから毎回ダウンロードされます。しかし、ほとんどのユーザーはそれをキャッシュに入れます (Web サーバーにインストールされているキャッシュ ツールに依存します)。

于 2013-08-25T19:52:23.833 に答える