我想应用jquery lazyload插件。为此，我必须创建一个新属性data src，将src值放在那里，然后用特定值替换src值\'...nothing.gif\'.我找到了一个solution on wordpress.org support
这是我的改编代码-
function add_lazyload($content)
{
global $post;
$search = \'/src\\=\\"([^\\s]+(?=\\.(bmp|gif|jpeg|jpg|png))\\.\\2)\\"/\';
$content = replacer($content, $search, \'/src/\', \'data-original\');
$search = \'/img\\ class\\=\\"/\';
$content = replacer($content, $search, \'/class\\=\\"/\', \'class="lazy \');
$search = \'/alt/\';
$content = replacer($content, $search, \'/alt/\', \'src="\'.get_template_directory_uri().\'/library/images/nothing.gif"\');
return $content;
}
function replacer($src, $search, $find, $replace)
{
preg_match_all($search, $src, $result, PREG_OFFSET_CAPTURE);
foreach($result[0] as $entry)
{
$org = $entry[0];
$rep = preg_replace($find, $replace, $entry[0]);
$org = "/" .str_replace(array("=",":","/",".","-","_",\'"\',"\'"," "), array("\\=","\\:","\\/","\\.","\\-","\\_",\'\\"\',"\\\'","\\ "), $org). "/";
$src = preg_replace($org, $rep, $src);
}
return $src;
}
add_filter(\'the_content\', \'add_lazyload\');
此代码的问题是它替换了
alt 字符串（例如段落中的字符串）
.../library/images/nothing.gif, 不仅仅是alt image属性。
有人知道如何解决这个问题吗？
SO网友:Shieeet
我修改了peteroak的优秀解决方案，将其转换为utf-8，并从输出中删除了doctype、html和body。
function add_lazyload($content) {
$content = mb_convert_encoding($content, \'HTML-ENTITIES\', "UTF-8");
$dom = new DOMDocument();
@$dom->loadHTML($content);
foreach ($dom->getElementsByTagName(\'img\') as $node) {
$oldsrc = $node->getAttribute(\'src\');
$node->setAttribute("data-original", $oldsrc );
$newsrc = \'\'.get_template_directory_uri().\'/images/nothing.gif\';
$node->setAttribute("src", $newsrc);
}
$newHtml = preg_replace(\'/^<!DOCTYPE.+?>/\', \'\', str_replace( array(\'<html>\', \'</html>\', \'<body>\', \'</body>\'), array(\'\', \'\', \'\', \'\'), $dom->saveHTML()));
return $newHtml;
}
add_filter(\'the_content\', \'add_lazyload\');
SO网友:Fabian Sebastian
我为Shieets解决方案添加了一些功能：
srcset支持（将srcset更改为数据srcset）
noscript fallback（显示原始图像）视频/嵌入/iframe支持（Youtube和co）影响缩略图的附加挂钩（除了发布图像）自动添加类“lazy”和“lazy hidden”以下是PHP代码：
// Lazyload Converter
function add_lazyload($content) {
$content = mb_convert_encoding($content, \'HTML-ENTITIES\', "UTF-8");
$dom = new DOMDocument();
@$dom->loadHTML($content);
// Convert Images
$images = [];
foreach ($dom->getElementsByTagName(\'img\') as $node) {
$images[] = $node;
}
foreach ($images as $node) {
$fallback = $node->cloneNode(true);
$oldsrc = $node->getAttribute(\'src\');
$node->setAttribute(\'data-src\', $oldsrc );
$newsrc = get_template_directory_uri() . \'/images/placeholder.gif\';
$node->setAttribute(\'src\', $newsrc);
$oldsrcset = $node->getAttribute(\'srcset\');
$node->setAttribute(\'data-srcset\', $oldsrcset );
$newsrcset = \'\';
$node->setAttribute(\'srcset\', $newsrcset);
$classes = $node->getAttribute(\'class\');
$newclasses = $classes . \' lazy lazy-hidden\';
$node->setAttribute(\'class\', $newclasses);
$noscript = $dom->createElement(\'noscript\', \'\');
$node->parentNode->insertBefore($noscript, $node);
$noscript->appendChild($fallback);
}
// Convert Videos
$videos = [];
foreach ($dom->getElementsByTagName(\'iframe\') as $node) {
$videos[] = $node;
}
foreach ($videos as $node) {
$fallback = $node->cloneNode(true);
$oldsrc = $node->getAttribute(\'src\');
$node->setAttribute(\'data-src\', $oldsrc );
$newsrc = \'\';
$node->setAttribute(\'src\', $newsrc);
$classes = $node->getAttribute(\'class\');
$newclasses = $classes . \' lazy lazy-hidden\';
$node->setAttribute(\'class\', $newclasses);
$noscript = $dom->createElement(\'noscript\', \'\');
$node->parentNode->insertBefore($noscript, $node);
$noscript->appendChild($fallback);
}
$newHtml = preg_replace(\'/^<!DOCTYPE.+?>/\', \'\', str_replace( array(\'<html>\', \'</html>\', \'<body>\', \'</body>\'), array(\'\', \'\', \'\', \'\'), $dom->saveHTML()));
return $newHtml;
}
add_filter(\'the_content\', \'add_lazyload\');
add_filter(\'post_thumbnail_html\', \'add_lazyload\');
