1

今天我开发了一种算法，可以将不同的图像加载到一个简单的画廊中。该脚本正在创建图像标签以将图像“缓冲”到其中。然后，JQuery 用于确定图像是否加载完毕。如果是这样，它会隐藏我的 loading_animation.gif，删除图像标记并显示一个 div 标记，并将图像设置为背景图像。基本上我正在使用 img 标签来使用 JQuery 的 .load() 函数。div 标签用于正确显示图像。

我的问题是：图像是从网络加载两次还是被浏览器缓存？当我看到我的脚本工作时，图像似乎被缓存了，但总是这样吗？如果人们禁用缓存，他们会加载图像两次，不是吗？

这是我的代码：

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

2

如果存在某些条件，您的想法应该可以正常工作：

  • 服务器必须设置一个过期日期（不是过去的）
  • 必须启用客户端缓存，并且没有任何干扰

编辑：我认为这种方法更好，因为它符合用户的选择：如果用户禁用缓存，那么他/她每次都希望看到资源- 我认为在这种情况下应该尊重用户的选择。不要忘记，用户可能是开发人员自己，在没有缓存内容的情况下第一次检查网站是如何加载的——我经常这样做。

于 2013-08-25T19:52:00.737 回答
0

在我看来，我认为这不是最好的方法。

如果你喜欢预加载图片（这可能很棘手），你应该使用 JS 并声明

var img1023 = new Image();

如果人们禁用缓存，那么它每次都会从服务器下载。但是大多数用户会在缓存中获取它（更多地取决于安装在 Web 服务器上的缓存工具。）

于 2013-08-25T19:52:23.833 回答