動態填充圖像大小屬性？

如何動態設置高度和寬度屬性？圖像是動態提供的（隨機照片），但並不總是相同的大小。我想將實際的高度和寬度值插入到標籤中，這樣我們可以在網絡性能報告上得到更好的分數（因未指定圖像大小而被標記）。這可以通過jQuery完成嗎？動態填充圖像大小屬性？

來源

2016-06-08 penncomm

你可以顯示你的「* [MCVE] *」HTML和JavaScript/jQuery嗎？你有什麼嘗試，你卡在哪裏，出了什麼問題..？你如何檢索/加載這些圖像？是的，這可以通過jQuery（當然，純JavaScript）完成。 –

僅僅改變標籤內的高度和寬度值不會帶來任何好處，如果你鏈接到一個圖像說尺寸爲1024x700和文件大小爲100kb的hello.jpg，所以如果你有''它仍然加載尺寸爲1024x700和文件大小的hello.jpg 100kb因此與網絡加載時間或網絡性能沒有任何區別;如果您可以根據您的尺寸調整服務器上的該文件大小，然後將其作爲src – Viney

我不會擔心太多。聽起來像任意點不必要的膨脹。你使用什麼網絡性能報告？ W3C？ –

下面的代碼使用jQuery來改變所有圖像的width和height一個<div>內寬一class="images" .Copy這個代碼是到一個新的頁面，並瞭解它是如何工作的，然後應用到自己的項目：

<head runat="server"> 
    <title></title> 
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function() { 

      $("#btnMakeImagesSmaller").click(function() { 
       MakeAllImagesSmaller(); 
      }); 

      function MakeAllImagesSmaller() { 
       debugger; 

       var images = $(".images img"); 

       for (var i = 0; i < images.length; i++) { 
        ChangeSize(images[i], "100px;", "100px"); 
       } 
      } 

      function ChangeSize(element, width, height) { 
       $(element).css("height", height); 
       $(element).css("width", width); 
      } 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <input type="button" id="btnMakeImagesSmaller" value="Make Images Smaller" /> 
     <div class="images"> 
      <img src="http://science-all.com/images/wallpapers/fruits-images/fruits-images-4.jpg" /> 
      <img src="http://blogs.extension.iastate.edu/foodsavings/files/2014/06/vegetables-variety.jpg" /> 
      <img src="http://gilowveld.sites.caxton.co.za/wp-content/uploads/sites/97/2016/03/Dairy-products.jpg" /> 
     </div> 
    </form> 
</body>

來源

2016-06-08 09:52:42

動態填充圖像大小屬性？

回答

相關問題