1

每当我在 Google 或GMetrix上进行速度测试时，他们总是给我一个 F，因为他们说我的图像尺寸没有指定，所以需要更多的 http 请求。但是在我的 asp.net (vb) 网站上，他们指定的链接是链接按钮，使用 CssClass看起来像这样：

<asp:Image ID="Image9" runat="server" ImageUrl="~/images/flagpt.png" 
CssClass="flagbutton" tooltip="Veja este site em português" 
title="Veja este site em português"/>

这会产生这个html 输出（使用 CssClass），但仍然没有 img 尺寸：

<img id="Image9" title="Veja este site em português" 
 class="flagbutton" title="Veja este site em português" 
 src="images/flagpt.png" />

但是，如果我只是这样放置height="15" width="26"，它仍然不起作用：

  <asp:Image ID="Image7" runat="server" ImageUrl="~/images/flagde.png" 
  height="15" width="26" tooltip="View this website in Deutsch" 
  title="View this website in Deutsch"/>

这会产生这个html 输出，但速度测试不会检测到 img 尺寸：

<img id="Image7" title="View this website in Deutsch" 
   title="View this website in Deutsch" 
   src="images/flagde.png" style="height:15px;width:26px;" />

速度测试仍然表明我没有指定我的尺寸。任何可以帮助我解决此问题的建议将不胜感激！

4

1 回答 1

0

首先，不指定图像尺寸不会导致额外的 HTTP 请求。这可能会导致浏览器在下载图像后必须重新排列您的文档，但这是另一个问题。

其次，您已经指定了图像尺寸。它就在输出中：

style="height:15px;width:26px;"

也不需要指定widthand属性。height

如果您真的想强制输出包含widthandheight属性，则需要使用自定义控件或控件适配器。这样的事情应该可以解决问题：

public class ImageDimensionsAdapter : WebControlAdapter
{
   protected override void Render(HtmlTextWriter writer)
   {
      var image = Control as Image;
      if (image != null)
      {
         Unit size = image.Width;
         if (!size.IsEmpty && size.Type == UnitType.Pixel)
         {
            writer.AddAttribute(HtmlTextWriterAttribute.Width, size.Value.ToString("###0"));
         }

         size = image.Height;
         if (!size.IsEmpty && size.Type == UnitType.Pixel)
         {
            writer.AddAttribute(HtmlTextWriterAttribute.Height, size.Value.ToString("###0"));
         }
      }

      base.Render(writer);
   }
}

要应用它，.browser请在您的App_Browsers目录中添加一个包含以下内容的文件：

<browsers>
   <browser refID="Default">
      <controlAdapters>
         <adapter
            controlType="System.Web.UI.WebControls.Image"
            adapterType="ImageDimensionsAdapter"
         />
      </controlAdapters>
   </browser>
</browsers>
于 2012-10-31T18:19:24.797 回答