Замена изображения на основе размера экрана с помощью JQuery

Question

Я пытаюсь изменить изображение src на основе размера экрана.

 $(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>

Моя логика кажется твердым. Я не уверен, почему он не работает.

Спасибо за помощь заранее.

Answer 1

Вам необходимо использовать функцию resize jquery.

Рабочая 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 код

$(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"); 
       });       
    }   
}); 

Надеется, что это помогает!

Answer 2

Не используйте замены:

<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"); 
       }); 
       } 
      }); 

Примечание: изображения будут меняться только при обновлении страницы после изменения размера окна, если вы хотите, чтобы автоматически изменить на изменение размера с помощью resize event

второй изменить идентификаторы для классов, если у вас есть несколько дивы, если у вас есть только один деление с удалить каждый цикл

Answer 3

Используйте окно изменения размера

$(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"); 
      }); 
      }); 
});