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

问题描述：

我有一个图像标签，我想在桌面和移动设备上显示不同的图像。会在每次调整大小时加载图像吗？

我有这样解决了它：

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时重新加载？换句话说，我需要进一步优化吗？

它不会因为所有的图像一旦加载DOM就会被加载，因为它们都在HTML中。 – Roberrrt

但他们没有来源..？ – Winter

如果不使用JavaScript，它会不会成为您的替代选择？只需通过HTML和CSS？ –

答

首先，如果您将.src属性设置为与已有值相同的值，则不会有任何更改，将不会重新加载任何内容。其次，图像由浏览器缓存，所以一旦它们被加载，随后的任何时间使用它们，它们都将从缓存中快速加载。仅供参考，您可以使用CSS media queries做所有这些工作，并让浏览器自动处理它。

谢谢，那是我正在寻找的答案。但是，我将如何与CSS做到这一点？ – Winter

因为我不想在移动设备上加载这两个图像，即使它们被隐藏，它们也会被浏览器加载 - 据我所知。 – Winter

http://*.com/questions/12158540/does-displaynone-prevent-an-image-from-loading – Winter

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

相关推荐