每次调整大小时都会加载图像吗？

Question

我有一个图像标签，我想在其中在桌面和移动设备上显示不同的图像。

我是这样解决的：

JS:

function displayResponsiveImage() {
    var largeImage = $('.responsive-image img.desktop');
    var smallImage = $('.responsive-image img.mobile');
    var realImage = $('.responsive-image img.real');

    var largeImageSrc = largeImage.data('imagesrc');
    var smallImageSrc = smallImage.data('imagesrc');

    var viewportWidth = window.innerWidth;

    if (viewportWidth > 480) {
        realImage.attr('src', largeImageSrc);
    } else {
        realImage.attr('src', smallImageSrc);
    }

    realImage.show();
    largeImage.hide();
    smallImage.hide();
};

$(window).on('resize', function () {
    displayResponsiveImage();
});

HTML:

<div class="image-container responsive-image" style="">
    <a href="@Url.ContentUrl(Model.Link)">
        <img class="desktop" data-imagesrc="@Html.GetUrl(Model.Image, true)" />
        <img class="mobile" data-imagesrc="@Html.GetUrl(Model.MobileImage, true)" />
        <img class="real" title="@Model.AltText" alt="@Model.AltText" />
    </a>
</div>

我的问题是：使用此设置，图像会在每次调整大小时重新加载还是仅在图像更改 src 时重新加载？换句话说，我需要进一步优化吗？

Answer 1

首先，如果您将 .src 属性设置为与现有值相同的值，则不会发生任何变化，也不会重新加载任何内容。

其次，图像由浏览器缓存，因此一旦加载，以后使用它们时，它们将直接从缓存中加载，速度很快。

仅供参考，您可以使用 CSS media queries 完成所有这些操作，并让浏览器自动处理。

每次调整大小时都会加载图像吗？

will image load on every resize?

javascript

jquery

resize

image