Bild ersetzen basierend auf der Bildschirmgröße mit Jquery

Question

Ich versuche, ein Bild src basierend auf der Bildschirmgröße zu ändern.

 $(document).ready(function() { 
 
\t \t \t \t $(function() { 
 
    \t \t \t \t if($(window).width() < 568) { 
 
    \t \t \t \t $("#crewimage").each(function() { 
 
     \t \t \t \t $(this).attr("src", $(this).attr("src").replace("resources/images/thecrew.png", "resources/images/thecrewmobile.png")); 
 
    \t \t \t \t }); 
 
    \t \t \t \t } else if ($(window).width() >= 568) { 
 
    \t \t \t \t $("#crewimage").each(function() { 
 
     \t \t \t \t $(this).attr("src", $(this).attr("src").replace("resources/images/thecrewmobile.png", "resources/images/thecrew.png")); 
 
    \t \t \t \t }); 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="crew-content"> 
 
\t  <img id="crewimage" src="resources/images/thecrew.png" alt="Header Image"></img> 
 
\t </div>

scheint Meine Logik solide. Ich bin mir nicht sicher, warum es nicht funktioniert.

Vielen Dank für die Hilfe im Voraus.

Answer 1

Sie müssen die resize Funktion von jquery verwenden.

Arbeits Fiddle: https://jsfiddle.net/f0ngoLkq/1/

HTML

<div id="crew-content"> 
    <img id="crewimage" src="http://completewebgraphics.com/wp-content/uploads/2015/11/Mobile-Apps-Development-in-India.jpg" alt="Header Image" /> 
</div> 

jQuery-Code

$(window).resize(function(e){ 
    if($(window).width() < 568) { 
    console.log($(window).width()); 
    $("#crewimage").each(function() { 
     $(this).attr("src", "http://s3.amazonaws.com/libapps/customers/1633/images/icon_52143.png"); 
       }); 
      } else if ($(window).width() >= 568) { 
       $("#crewimage").each(function() { 
       $(this).attr("src","https://ithemes.com/wp-content/uploads/2012/07/mobile300.png"); 
       });       
    }   
}); 

hoffe, das hilft!

Answer 2

Ersetzen Sie nicht verwenden:

<img class="crewimage" src="resources/images/thecrew.png" alt="Header Image"></img> 

      $(function() { 
      if($(window).width() < 568) { 
       $(".crewimage").each(function() { 
       $(this).attr("src","resources/images/thecrewmobile.png"); 
       }); 
      } else if ($(window).width() >= 568) { 
       $(".crewimage").each(function() { 
       $(this).attr("src","resources/images/thecrew.png"); 
       }); 
       } 
      }); 

Anmerkung: die Bilder werden nur dann ändern, wenn Sie die Seite nach dem Fenster Resize zu aktualisieren, wenn Sie automatisch auf Resize ändern möchten verwenden, um die resize event

an zweiter Stelle ändern Sie die IDs Klassen, wenn Sie mehrere divs haben, wenn Sie einen haben nur div entfernen die jede Schleife

Answer 3

Verwenden Fenstergröße ändern

$(window).resize(function(){ 

    $(function() { 
      if($(window).width() < 568) { 
       $(".crewimage").each(function() { 
       $(this).attr("src","resources/images/thecrewmobile.png"); 
       }); 
       }); 
      } else if ($(window).width() >= 568) { 
       $(".crewimage").each(function() { 
      $(this).attr("src","resources/images/thecrew.png"); 
      }); 
      }); 
});