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

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 来完成这一切并让浏览器自动处理。