1

我正在尝试通过 PHP 的 DOMDocument 传递一个 HTML 块来重构<img>内联元素：http: //www.appelsiini.net/projects/lazyload

对于每个<img>我尝试插入重构的副本，然后将原始副本包装在<noscript>标签中以用于非 JS 后备。

例子：

输入：

<img src="img/example.jpg" width="640" heigh="480">

输出：

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"><noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

我有包装工作，新元素也正确构造。问题是第二个appendChild（下面）不起作用，我不知道为什么。任何人都可以提供解决方案吗？

我有以下代码：

$noScript = $dom->createElement('noscript');
$images = $dom->getElementsByTagName('img');
foreach ($images as $image) {
    $src = $image->getAttribute('src');
    $alt = $image->getAttribute('alt');
    $title = $image->getAttribute('title');
    $style = $image->getAttribute('style');

    $newImage = $dom->createElement('img');
    $newImage->setAttribute('class', 'lazy');
    $newImage->setAttribute('data-original', $src);
    $newImage->setAttribute('src', '/images/whitespace.gif');
    if ($style) $newImage->setAttribute('style', $style);
    if ($alt) $newImage->setAttribute('alt', $alt);
    if ($title) $newImage->setAttribute('title', $title);

    $noScriptClone = $noScript->cloneNode();
    $image->parentNode->replaceChild($noScriptClone, $image);
    $noScriptClone->appendChild($image);
    $noScriptClone->parentNode->appendChild($newImage);
}
return $dom->saveHTMLExact();
4

1 回答 1

0

我确实解决了这个问题（以一种迂回的方式）但忘记发布我的解决方案 - 直到现在。

我最终使用了QueryPath，效果非常好。

function lazyLoadImages($source = '') {
  $qp = htmlqp($source);
  foreach ($qp->find('img') as $image) {
    $src = $image->attr('src');
    $alt = $image->attr('alt');
    $title = $image->attr('title');
    $style = $image->attr('style');
    $class = $image->attr('class');
    $image->wrap('<noscript/>')->parent('noscript')->after('<img src="/images/whitespace.gif" data-original="' . $src . '" style="' . trim($style) . '"' . ($alt ? ' alt="' . $alt . '"' : '') . ($title ? ' title="' . $title . '"' : '') . ' class="lazy' . ($class ? ' ' . $class : '') . '" />');
  }
  $content = preg_replace(array("/<\?xml.*?\?>/si", "/<\!DOCTYPE.*?>/", "!<(/)?body>!si", "!<(/)?html>!si"), '', $qp->writeSnippet());
  return $content;
}
于 2012-11-02T12:52:23.753 回答