【问题标题】:Add image dimensions automatically to <img>自动将图像尺寸添加到 <img>
【发布时间】:2013-04-02 06:02:30
【问题描述】:

我在 gtmetrix.com 上为我的网站评分。

它建议为我的所有图像添加图像尺寸。问题是,我需要一些自动添加这些的方法,所以如果图像发生变化,尺寸也会更新。

我有什么

<img src="bla.png">

我想要什么

<img src="bla.png" width="{width of image}" height="{height of img}">

是否有 php 方式或 jquery 方式来执行此操作? 对于 wordpress 网站。

【问题讨论】:

  • 使用 jQuery 计算加载时的图像尺寸实际上可能会降低您的网站速度,而不是那里没有尺寸。我的网站计算上传图像的尺寸并将它们存储到 PHP 在加载时检索它们的数据库,但我的不是 WP 网站。事实上,在加载时做任何事情都可能会损害页面加载速度。
  • 数据库方法在 IMO 上效果很好。

标签: php jquery image frontend dimensions


【解决方案1】:

PHP:

<?php
list($width, $height) = getimagesize("bla.png");
echo "<img src='bla.png' width='$width' height='$height'>";
?>

【讨论】:

    【解决方案2】:

    您可以使用image onload 事件来计算图像的尺寸。纯 javascript 方法,类似于 ;

    var image = new Image();
    
    image.onload = function()
    {
      //after load complete you will get the image dimensions here from 
      //image.width and image.height
    }
    
    image.src = 'image url';
    

    【讨论】:

    • IMO 它违背了在标记中指定图像尺寸的全部意义
    • @Ejay OP 可以在 image.onload 事件的标记中分配维度
    • 是的,但它仍然会等待图像完全加载,因此页面无论如何都会重新渲染
    • 没有整页不会重新渲染,只有特定的图片宽度和高度属性会在图片加载完成后更新
    • 你是对的 重新渲染 :) 我试图使用的特定术语是 reflow and repaint developers.google.com/speed/docs/best-practices/…
    【解决方案3】:

    如果您动态输出图像,则在 php 中为 getimagesize($file)

    【讨论】:

      【解决方案4】:

      您应该使用 PHP 而不是 javascript。如果使用 jQuery / javascript 添加,加载后会添加宽度和高度。指定宽度和高度的主要原因是为了让引擎更快地渲染页面。如果在加载后添加,将没有任何帮助。

      你可以直接在图片标签中使用getimagesize()返回数组的索引3。它包含一个带有 height="yyy" width="xxx" 的字符串,可以直接在 IMG 标签中使用。

      <?php
          list($width, $height, $type, $attr) = getimagesize("file.png");
          echo "<img src='file.png' $attr />";
      ?> 
      

      您可以访问http://php.net/manual/en/function.getimagesize.php了解有关此功能的更多详细信息。

      【讨论】:

        猜你喜欢
        • 2014-06-07
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-11-28
        • 2011-05-26
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多