Question

今天我开发了一种算法，可以将不同的图像加载到一个简单的图库中。该脚本正在为＆＃34;缓冲区＆＃34;创建图像标签。图像进入。然后，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>

Answer 1

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

服务器必须设置过期日期（不是过去的日期）
必须启用客户端缓存，不得干扰它

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

Answer 2

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

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

var img1023 = new Image();

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

HTML加载图片：我的算法是否产生过多的流量？

2 个答案: