會在每次調整大小時加載圖像嗎？

我有一個圖像標籤，我想在桌面和移動設備上顯示不同的圖像。會在每次調整大小時加載圖像嗎？

我有這樣解決了它：

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時重新加載？換句話說，我需要進一步優化嗎？

來源

2016-09-15 Winter

它不會因爲所有的圖像一旦加載DOM就會被加載，因爲它們都在HTML中。 – Roberrrt

但他們沒有來源..？ – Winter

如果不使用JavaScript，它會不會成爲您的替代選擇？只需通過HTML和CSS？ –

首先，如果您將.src屬性設置爲與已有值相同的值，則不會有任何更改，將不會重新加載任何內容。其次，圖像由瀏覽器緩存，所以一旦它們被加載，隨後的任何時間使用它們，它們都將從緩存中快速加載。僅供參考，您可以使用CSS media queries做所有這些工作，並讓瀏覽器自動處理它。

來源

2016-09-15 13:15:04 jfriend00

謝謝，那是我正在尋找的答案。但是，我將如何與CSS做到這一點？ – Winter

因爲我不想在移動設備上加載這兩個圖像，即使它們被隱藏，它們也會被瀏覽器加載 - 據我所知。 – Winter

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

會在每次調整大小時加載圖像嗎？

回答

相關問題