jquery - 获取和设置图像大小无法在 safari 中工作

Question

我的页面上几乎没有大图像，因此当我做移动网络时，我想在例如在 iphone 上查看时调整它们的大小。

因此我制作了类似的代码

<img src="http://www.wallsave.com/wallpapers/1920x1080/world-of-warcraft-cataclysm/443482/world-of-warcraft-cataclysm-games-trading-card-game-443482.jpg" />
<img src="http://www.wallsave.com/wallpapers/1920x1080/world-of-warcraft-cataclysm/443482/world-of-warcraft-cataclysm-games-trading-card-game-443482.jpg" />
<img src="http://www.wallsave.com/wallpapers/1920x1080/world-of-warcraft-cataclysm/443482/world-of-warcraft-cataclysm-games-trading-card-game-443482.jpg" />

<script type="text/javascript">
$(function(){
    var w=$(window).width();

    $("img").each(function(){
        alert($(this).width());//shows 'zero'

        if($(this).width()>w){
            var nw=w-60;
            alert(nw);
            $(this).css('width',nw+"px");
            $(this).css('height','auto');
        }
    });
});
</script>

该代码在 iphone 上的 chrome 上运行良好，但是在 safari 中查看时，不会发生调整大小。另一个奇怪的事情是我尝试提醒图像大小，但不断收到“零”警报。

Answer 1

you must call the function

    <script src='jquery.js'></script>
    <script type="text/javascript">
          $(document).ready(function(){
              var w=$(window).width();

              $("img").each(function(){
                  alert($(this).width());//shows 'zero'

                  if($(this).width()>w){
                      var nw=w-60;
                      alert(nw);
                      $(this).css('width',nw+"px");
                      $(this).css('height','auto');
                  }
              });
           });

        </script>

Answer 2

您应该等到图像加载完毕，例如：

$("img").each(function(){
    $(this).load(function() {
        if($(this).width()>w){
            var nw=w-60;
            $(this).css('width',nw+"px");
            $(this).css('height','auto');
        }
    });
});