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

首先，如果您将public DnnRole GetDnnRoleByName(int portalId, string dnnRoleName) { DnnRole role = null; try { RoleController rc = new RoleController(); RoleInfo dnnRole = rc.GetRoleByName(portalId, dnnRoleName); if (dnnRole != null) { role = new DnnRole(); role.Id = dnnRole.RoleID; role.RoleName = dnnRole.RoleName; role.Description = dnnRole.Description; } }属性设置为与其已经存在的值相同，则不会更改任何内容，也不会重新加载任何内容。

其次，图像由浏览器缓存，因此一旦加载它们，随后它们被使用，它们将被简单地从缓存加载。

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

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

1 个答案: