1

<img>HTMLのブロックをPHPのDOMDocumentに渡して、要素をインラインでリファクタリングしようとしています：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>

ラッピングが機能していて、新しい要素も正しく構成されています。問題は、2番目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 に答える