Question

我想要的是一个我可以在用户输入上运行的功能，它可以智能地查找并将width和height属性添加到HTML blob中的任何<img>标记中，以便图像加载时避免页面回流问题。

我正在为PHP论坛编写发布脚本，其中用户的输入被清理并且通常在将其写入数据库之前变得更好以供稍后显示。作为我做的事情的一个例子，我有一个脚本可以将alt属性插入到图像中，如下所示：

Here are two images: <img src="http://example.com/image.png"> <img src="http://example.com/image2.png">

，在通过发布脚本进行消毒后，变为

Here are two images: <img src="http://example.com/image.png" alt="Posted image"> <img src="http://example.com/image2.png" alt="Posted image">

（这使得它在HTML 4下严格验证，但可能不符合alt属性的精神 - 唉！）

因此，对于我的函数，我有一个含糊的想法，即服务器需要在HTML块中找到的每个外部图像上运行getimagesize()，然后将函数生成的属性应用于每个{它标记为{1}}标记。我认为这个函数之前已经编写过，但我在Google或php.net文档上没有运气。我是否必须从头开始，或者是否有人意识到（相对）强大的功能，我可以使用或适应这项工作？

Answer 1

你对getimagesize()是正确的。你可以简单地做这样的事情：

$img = 'image2.png';
$info = getimagesize($img);
printf('<img src="%s" %s>', $img, $info[3]);

如果图像托管在远程位置，则必须下载所有图像（该功能会处理它），因此您可能希望缓存结果以加快后续请求的速度。

修改：刚看到您有一个包含各种<img>元素的字符串。这应该可以解决问题：

<?php
$html = <<<EOF
something <img src="https://www.google.com/images/logos/ssl_logo_lg.gif"> hello <img src="https://mail.google.com/mail/images/2/5/logo1.png">
EOF;

$dom = new DOMDocument();
$dom->loadHTML($html);

foreach ($dom->getElementsByTagName('img') as $img) {
    list($width, $height) = getimagesize($img->getAttribute('src'));
    $img->setAttribute('width', $width);
    $img->setAttribute('height', $height);
}

$xpath = new DOMXpath($dom);
$newDom = new DOMDocument();
foreach ($xpath->query('//body/p')->item(0)->childNodes as $node) {
    $newDom->appendChild($newDom->importNode($node, true));
}

$newHtml = $newDom->saveHTML();
?>

Answer 2

问题是您要求服务器预先做大量的工作。我怀疑离线填充大小数据库（或维护大小缓存）会更有效率。

完成此操作后，您可以通过使用可缓存的javascript来将工作推送到浏览器，该javascript设置图像大小并在html结尾处内联调用（具有您不需要推送的优势）所有的HTML通过你的PHP代码进行重写）。提示：遍历document.images []

HTH

下进行。

Answer 3

你可以使用getimagesize（），但是将这些信息存储一次并重新使用它是明智的，或者至少积极地缓存（因为它不太可能经常更改）或者你的服务器将以更高的负载爬行停止

使用PHP函数自动将宽度和高度属性添加到<img/>标记

3 个答案: