Question

根据jQuery.lazyload我想要“懒散”的所有图片都需要将src属性替换为data-original。

我假设我可以使用WordPress get_image_tag过滤器做到这一点，但我仍然坚持如何实现它。

function image_src( $id, $alt, $title, $align, $size ) {
    $html = '<img data-orginial="' . esc_attr($img_src) . '"/>';
    return $html;
}
add_filter( 'get_image_tag', 'image_src', 10, 5 );

要使lazyload工作，还需要将lazy类放在IMG上，我设法使用WordPress get_image_tag_class过滤器

进行工作

function image_class( $classes ) {
    return $classes . ' lazy';
}
add_filter( 'get_image_tag_class', 'image_class' );

有关如何更改IMG输出以替换data-orginial而不是src的任何想法？

Answer 1

富 -

我遇到了同样的问题并且走了与你相同的路径，尝试使用get_image_tag但效果不佳。所以我提出了一个JS解决方法 - 代码注释应该告诉你如何使这个工作：

function() {
  // To get lazy loading working on blog post
  // 1- Assign all image source paths into a sourcePath variable
  var sourcePath = $("figure").find("img").attr("src");

  // 2- Nullify source paths, move path to data-original attribute and add lazy-load class to img
  $("figure").find("img").attr({
    "src" : " ",
    "data-original" : sourcePath
  }).addClass("lazy-load");

  // 3- Applies lazy-loading jQuery plugin to image elements
  $("img.lazy-load").lazyload({
    effect : "fadeIn"
  });
}

Answer 2

您需要替换src部分

function image_src( $id, $alt, $title, $align, $size ) {
  if( ! is_admin() ) $html = str_replace("img src=","img data-original=",$html);
  return $html;
}
add_filter( 'get_image_tag', 'image_src', 10, 5 );

您可能需要对其进行调整，使其与原始<img>设置匹配。

编辑：添加了Nath的建议。

修改Wordpress get_image_tag输出？

2 个答案: