1

根据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？

4

2 回答 2

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"
  });
}
于 2016-03-04T20:40:57.160 回答
0

您将需要更换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 的建议。

于 2015-01-07T15:28:19.927 回答