使用NextGen图库进行无限滚动/延迟加载

时间:2011-03-07 作者:aendra

我正在为一个朋友做一个项目,涉及一个包含3000多张照片的巨大页面。请参见:http://www.thepurplepixie.com/projects/purple-pixies-people-project/

目前,我已将分页设置为每页50个缩略图,以便尝试获取Infinite Scroll (Wordpress Plugin) (Infinite Scroll Homepage) 工作,并说明我如何在NextGen建立画廊。以前,我对照片进行分页,所以这是一堵巨大的照片墙,虽然或多或少实现了我想要的东西,但最终还是很难加载--无论是在内存还是带宽方面。

我似乎无法使用Infinite Scroll的插件版本,我猜是因为它的结构更倾向于帖子内容,而不是一大串图像。此外,由于每页有多个库,因此每页有多个分页系统实例。

Does anyone have any idea how I would go about lazy loading these images?

非常感谢。

3 个回复
SO网友:its_me

尝试Lazy Load 插件——据说它的代码是在WordPress上使用的。com VIP网站,该插件非常流行(最近于7月4日更新)。

小心在连接速度较慢的情况下,延迟加载图像是很棘手的,因为在这种情况下,图像可能根本无法加载。即使是JavaScript代码中的一个小错误或不兼容也会破坏您的站点。

SO网友:jim.duck

function enqueue_lazyload() {
    wp_enqueue_script(\'jquery_lazy_load\', get_stylesheet_directory_uri() . \'/js/jquery.lazyload.min.js\', array(\'jquery\'), \'1.9.1\');
}

add_action(\'wp_enqueue_scripts\', \'enqueue_lazyload\');
接下来,我们必须在页脚中添加一小段Javascript,以使延迟加载插件能够识别图像。您可以在插件的主页上看到这是如何工作的,但基本上我们必须为插件指定一个类作为目标。当用户滚动到该类时,它将使用该类中的任何图像来交换占位符图像和实际图像。我们将使用wp\\u footer操作自动将其附加到每个页面的页脚。

function footer_lazyload() {
    echo \'<script type="text/javascript">
        (function($){
          $("img.lazy").lazyload();
        })(jQuery);
    </script>\';
}

add_action(\'wp_footer\', \'footer_lazyload\');
有了这段代码,延迟加载插件将真正开始工作。但我们的图片仍由WordPress加载。诀窍是过滤我们所有的帖子,并用占位符图像替换掉一个图像。然后,根据插件的说明,我们在img标记上使用“data original”属性来表示图像的实际URL。最后,我们向每个图像添加一个“lazy”类,以便jQuery知道如何查找它。延迟加载插件将等待这些图像进入用户视图,然后使用AJAX将它们拉入并加载到页面上。我们的第一步是使用preg\\u replace\\u回调添加一个简单的过滤器来搜索img标记。

function filter_lazyload($content) {
    return preg_replace_callback(\'/(<\\s*img[^>]+)(src\\s*=\\s*"[^"]+")([^>]+>)/i\', \'preg_lazyload\', $content);
}

add_filter(\'the_content\', \'filter_lazyload\');

SO网友:Evan Wondrasek

这个jQuery lazy load plugin 因为WordPress在过去对我很有效。请注意,2010年9月,Lazy Load作者wrote this:

延迟加载当前不可用。它不能像预期的那样与最新的浏览器配合使用。我目前没有时间自己更新代码。补丁总是受欢迎的。如果您找到了解决方案,只需fork并发送一个pull请求。谢谢

相关推荐

WooCommerce Custom Pagination

有人能帮我解决我的定制归档产品的问题吗。php?我正在尝试将分页添加到我制作的网格中,但不知道从何处开始。这是我的产品代码:<?php $the_query = new WP_Query( array( \'posts_per_page\'=>12, \'post_type\'=>\'product\', \'paged\' => get_query_var(\'paged\') ? get_query_var(\'paged\') : 1

使用NextGen图库进行无限滚动/延迟加载 - 小码农CODE - 行之有效找到问题解决它

使用NextGen图库进行无限滚动/延迟加载

时间:2011-03-07 作者:aendra

我正在为一个朋友做一个项目,涉及一个包含3000多张照片的巨大页面。请参见:http://www.thepurplepixie.com/projects/purple-pixies-people-project/

目前,我已将分页设置为每页50个缩略图,以便尝试获取Infinite Scroll (Wordpress Plugin) (Infinite Scroll Homepage) 工作,并说明我如何在NextGen建立画廊。以前,我对照片进行分页,所以这是一堵巨大的照片墙,虽然或多或少实现了我想要的东西,但最终还是很难加载--无论是在内存还是带宽方面。

我似乎无法使用Infinite Scroll的插件版本,我猜是因为它的结构更倾向于帖子内容,而不是一大串图像。此外,由于每页有多个库,因此每页有多个分页系统实例。

Does anyone have any idea how I would go about lazy loading these images?

非常感谢。

3 个回复
SO网友:its_me

尝试Lazy Load 插件——据说它的代码是在WordPress上使用的。com VIP网站,该插件非常流行(最近于7月4日更新)。

小心在连接速度较慢的情况下,延迟加载图像是很棘手的,因为在这种情况下,图像可能根本无法加载。即使是JavaScript代码中的一个小错误或不兼容也会破坏您的站点。

SO网友:jim.duck

function enqueue_lazyload() {
    wp_enqueue_script(\'jquery_lazy_load\', get_stylesheet_directory_uri() . \'/js/jquery.lazyload.min.js\', array(\'jquery\'), \'1.9.1\');
}

add_action(\'wp_enqueue_scripts\', \'enqueue_lazyload\');
接下来,我们必须在页脚中添加一小段Javascript,以使延迟加载插件能够识别图像。您可以在插件的主页上看到这是如何工作的,但基本上我们必须为插件指定一个类作为目标。当用户滚动到该类时,它将使用该类中的任何图像来交换占位符图像和实际图像。我们将使用wp\\u footer操作自动将其附加到每个页面的页脚。

function footer_lazyload() {
    echo \'<script type="text/javascript">
        (function($){
          $("img.lazy").lazyload();
        })(jQuery);
    </script>\';
}

add_action(\'wp_footer\', \'footer_lazyload\');
有了这段代码,延迟加载插件将真正开始工作。但我们的图片仍由WordPress加载。诀窍是过滤我们所有的帖子,并用占位符图像替换掉一个图像。然后,根据插件的说明,我们在img标记上使用“data original”属性来表示图像的实际URL。最后,我们向每个图像添加一个“lazy”类,以便jQuery知道如何查找它。延迟加载插件将等待这些图像进入用户视图,然后使用AJAX将它们拉入并加载到页面上。我们的第一步是使用preg\\u replace\\u回调添加一个简单的过滤器来搜索img标记。

function filter_lazyload($content) {
    return preg_replace_callback(\'/(<\\s*img[^>]+)(src\\s*=\\s*"[^"]+")([^>]+>)/i\', \'preg_lazyload\', $content);
}

add_filter(\'the_content\', \'filter_lazyload\');

SO网友:Evan Wondrasek

这个jQuery lazy load plugin 因为WordPress在过去对我很有效。请注意,2010年9月,Lazy Load作者wrote this:

延迟加载当前不可用。它不能像预期的那样与最新的浏览器配合使用。我目前没有时间自己更新代码。补丁总是受欢迎的。如果您找到了解决方案,只需fork并发送一个pull请求。谢谢