jquery图像替换屏幕尺寸调整

Question

我有一些jquery，它会在屏幕尺寸低于600像素时替换图像。

<script type="text/javascript"> 
    jQuery(window).on("load resize", function (e) { 
     jQuery(function() { 
      if (jQuery(window).width() <= 600) { 
       jQuery("img").each(function() { 
        jQuery(this).attr("src", jQuery(this).attr("src").replace("img/my_safe_net_hero_img_knight_2014_2.jpg", "img/my_safe_net_knight_mob_version_2014.png")); 
       }); 
      } 

     }); 
    }); 
</script> 

这是有效的，但是如果你想再次放大屏幕，小图仍然存在。我想我可以通过添加一个else语句来修复它，但它不起作用。当我这样做的时候，似乎打破了整个事情。

<!--Hero Image Replacement--> 
<script type="text/javascript"> 
    jQuery(window).on("load resize", function (e) { 
     jQuery(function() { 
      if (jQuery(window).width() <= 600) { 
       jQuery("img").each(function() { 
        jQuery(this).attr("src", jQuery(this).attr("src").replace("img/my_safe_net_hero_img_knight_2014_2.jpg", "img/my_safe_net_knight_mob_version_2014.png")); 
       }); 
      } 
      else { 
       jQuery(this).attr("src", jQuery(this).attr("src").replace("img/my_safe_net_knight_mob_version_2014.png" , "img/my_safe_net_hero_img_knight_2014_2.jpg")); 
      }; 
     }); 
    }); 
</script> 

上面的脚本有什么问题。我应该使用不同的东西来达到这个目的吗？

这里是一个Fiddle of my code

Answer 1

试试这个：

http://jsfiddle.net/kgnfqbxs/1/

jQuery(window).on("load resize", function (e) { 
      if (jQuery(window).width() <= 600) { 
       jQuery("img").each(function() { 
        jQuery(this).attr("src", jQuery(this).attr("src").replace("http://placehold.it/350x150", "http://placehold.it/150x150")); 
       }); 
      } else { 
       jQuery("img").each(function() { 
        jQuery(this).attr("src", jQuery(this).attr("src").replace("http://placehold.it/150x150", "http://placehold.it/350x150")); 
       }); 
      } 

    }); 

请考虑，这将不必要地循环在你的页面每一个形象，有更好的方式，如果可以的话，像给你的图像一个ID =“myimage”，然后只是：

jQuery("#myimage").attr("src","http://placehold.it/150x150"); 

jQuery("#myimage").attr("src","http://placehold.it/350x150");