wird Bild auf jede Größenänderung geladen?

Question

Ich habe ein Image-Tag, in dem ich verschiedene Bilder in Desktop und Mobile anzeigen möchte.

ich gelöst habe es wie folgt aus:

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> 

Meine Frage ist: mit diesem Set-up, wird das Bild neu laden auf jeder Größe ändern oder wird es nur neu geladen, wenn das Bild src ändert? Mit anderen Worten, muss ich das weiter optimieren?

Answer 1

Zunächst einmal, wenn Sie die Eigenschaft .src auf den gleichen Wert setzen, den sie bereits hat, ändert sich nichts, nichts wird neu geladen.

Zweitens, Bilder werden vom Browser zwischengespeichert, so dass sie nach dem Laden, wenn sie später verwendet werden, einfach aus dem Cache geladen werden, was schnell ist.

FYI, Sie könnten wahrscheinlich all dies mit CSS media queries tun und lassen Sie den Browser automatisch verarbeiten.