香港企业网站开发:如何将延迟加载添加到WordPress

延迟加载是一种前端开发技巧,它将页面以下内容的加载推迟到用户滚动到页面之前。你可以把它看作是图像预压的反面。它确保资源,特别是那些承载更多权重的资源(图像、视频、脚本),只有在必要时才加载。延迟加载可以多种不同的方式使用。您可以选择在单个资源(如图像)上撒上该技术并延迟加载,也可以使用无限滚动为您的整个站点实现该技术。在本文中,我们将讨论什么是延迟加载,然后介绍几种在WordPress中实现它的方法。

拉力加载的Pros和Cons

延迟加载内容的最大优点是,它使您的初始页面加载速度更快。如果浏览器不必担心立即加载页面上的每个资源,那么香港企业网站开发可以更快地加载用户可以立即看到的内容。当用户开始滚动时,内容将被加载进来。

香港企业网站开发在讨论无限滚动时,常常提到延迟加载。“无限卷轴”实际上是对分页的一种替代。这是一种技术,每次用户滚动到页面底部时都会加载新内容。你可能已经在网络上看到过,在博客或者像Pinterest这样的网站上。这使得内容发现更加容易,而不需要读者一页接一页地点击以找到他们正在寻找的内容。当您只需要加载更多的帖子供人们查看时,它还可以为您节省页面加载。从长远来看,如果实现得当,延迟加载可以使您的站点更快,并且对您的用户来说是一种非常好的体验。

香港企业网站开发

关于Pinterest的无限滚动

但是延迟加载,特别是无限滚动,有其缺点。最大的一个就是不用相当先进的解决办法很难让搜索引擎识别懒散加载的内容。对于某些资源来说,这可能无关紧要。但是,如果你要完全取代分页,隐藏在折叠下面的内容可能不会被谷歌或其他搜索引擎读取。在真正无限滚动的情况下,当用户尝试使用“后退”按钮或从更远的位置返回内容时,也会出现问题,但无法做到这一点。

毕竟,延迟加载本质上是一种黑客。它经常使用一种技术,用占位符代替页面下方的内容,然后再加载它。或者,对于无限滚动站点,当用户的滚动位置到达底部时,通过Ajax加载内容。它使初始页面加载速度更快,但用户体验仍然需要考虑。

幸运的是,如果你少用懒散的加载,那么很多负面的东西就会消失。通过延迟加载图像、视频和脚本,您可以获得很多东西,同时仍然保留所有的内容和页面。当然,图像将与占位符交换,但是一个好的ALT标记可以很好地帮助这一点。

我们要做的第一件事是通过几个步骤来研究如何在主题中实现图像延迟加载。但是对于更高级的延迟加载,有一些插件可以帮助您自动启动和运行。

向主题添加图像延迟加载

香港企业网站开发为了说明如何在WordPress站点中使用延迟加载,我们将向站点添加延迟加载图像,这样所有图像都会自动用占位符图像交换,然后当用户滚动到它时加载。为了实现这一点,我们将使用jQuery插件的延迟加载.

您可以首先创建一个子主题,并将下面的所有代码放在Functions.php档案。但是,由于这是一项功能,所以它可能也是值得的。创建一个单独的插件,所以不管你使用什么主题,它都会被激活。在这两种情况下,代码或多或少是相同的。

第一件事就是把我们的资产集中起来。下载小型化版本将jQuery延迟加载插件,并将其添加到子主题文件夹中标记为“js”的文件夹中。接下来,创建一个名为“img”的文件夹,并将下面的gif文件添加到其中。这将用作延迟加载的图像的占位符图像。

现在我们可以开始添加一些代码了。首先要做的是确保将延迟加载脚本添加到WordPress主题中。为此,我们使用wp_enQueue_script操作,确保添加“jQuery”作为脚本的依赖项。这将确保只加载我们的脚本。jQuery

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_fount操作自动将其附加到每个页面的页脚。

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

有了这些代码,延迟加载插件实际上就会开始工作了。但是我们的图片仍然被WordPress加载。诀窍是过滤我们所有的帖子,用占位符图像交换图像。然后,根据插件的说明,我们在IMG标签上使用一个“数据-原始”属性来表示图像的实际URL。最后,我们在每个映像中添加一个“懒惰”类,这样jQuery就知道要查找它了。延迟加载插件将等待这些图像进入用户视图,然后使用Ajax将它们拉进来并加载到页面上。

我们的第一步是使用preg_reve_callback添加一个简单的过滤器来搜索IMG标记。

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

调用时,此函数将搜索内容并查找所有图像。然后,它将把这些图像传递给preg_lazyload函数,我们将在下面讨论这个函数。接下来,我们使用“the_content”过滤器在呈现POST时自动过滤所有POST的内容。这并不是实现这一目标的最有效的方式,但它运行得相当好。每次呈现POST时,所有图像都将被过滤,并通过“preg_lazyload”运行。那个功能是什么样子的?

function preg_lazyload($img_match) {

    $img_replace $img_match[1] . 'src="' . get_stylesheet_directory_uri() . '/img/grey.gif" data-original' substr($img_match[2], 3) . $img_match[3];

    $img_replace = preg_replace('/class\s*=\s*"/i''class="lazy '$img_replace);

    $img_replace .= '<noscript>' $img_match[0] . '</noscript>';
    return $img_replace;
}

这就是魔法发生的地方。preg_lazyload接收我们的过滤器找到的所有图像,并做一些事情。首先,它将我们的“src”替换为指向上面保存的占位符图像的链接。接下来,它添加了“数据-原始”属性,并将指向图像的链接放在其中。之后,它将HTML类“懒惰”附加到图像中,以便我们的插件知道如何查找它,并在滚动页上执行图像交换。作为最后的预防措施,我们在noscript标记中添加图像的全部源,以防用户禁用Javascript。

现在,当文章中的图片出现在读者的视图中时,它们将懒洋洋地加载进来。这当然是实验性的,并不是所有的情况,但它是一个示范和一个良好的起点。实际上,我们已经可以通过封装PHP类中的所有内容,然后调用它来改进它。我在参考要点.

如果您正在寻找一个良好的插件实现,也可以查看吴家富的GitHub回购。上面的大部分代码都是基于他的实现。

使用插件延迟加载

如果您希望在WordPress中包含更高级的延迟加载技术,那么有几个插件可以帮助您。每个插件以不同的方式实现延迟加载,但结果总是一样的。更快的页面加载。

火箭拉力

以上代码的一个更彻底的实现可以在RocketLazyLoad中找到。它会自动工作,只要你激活它,并将延迟加载图片在你的网站上,直到它已经进入读者的意见。而不是使用jQuery延迟加载插件,而是将少量Javascript注入您的站点的标题中,负责处理所有事务。它绝对没有任何选项,不过如果您想绕过该功能,可以向图像中添加数据属性。但这是简单的。激活插件添加图像延迟加载到您的网站,并关闭它。其他一切都会自动工作。

BJ拉力负载

BJ延迟负载带来了更多的问题。BJLazyLoad不是只关注图像,而是允许您延迟加载图像和iframes。它还允许您选择性地选择在内容、文本小部件、特色图像或凹版文件中应用延迟加载的位置。在安装和激活插件之后,您可以通过访问设置页面来配置哪些资产应该是延迟加载的,哪些是在哪里加载的。在此页面上,如果不想使用插件提供的占位符图像,还可以上传自己的自定义占位符图像,并选择应该绕过的某些类名。

BJLazyLoad也有一些额外的特性,使它值得一看。它不是一个无限滚动插件,但它与其他流行的无限滚动实现一起工作。该插件的最新版本包括对响应图像的支持。然而,这仍然是相当新的插件,可能不适用于所有的主题。但是无论如何,BJLazyLoad保持了相当轻量级的功能,并且可以在幕后为您提供更快的页面加载速度。

视频延迟加载

在任何网站上,资源密集程度较高的网站之一是YouTube或Vimeo的第三方视频嵌入。它们被加载到您的页面中,包含几个图像、脚本和样式表,以使它们正常工作。延迟加载视频是为解决这个特定的用例而构建的插件。它过滤您的嵌入式视频,并替换所有这些外部文件的静态图像您的缩略图和播放按钮。只有当按下Play按钮时,这些资源才会实际加载进来。这是一个无缝的经验,你的用户,但可以真正加快一个网页上的多个视频。而且,由于插件挂钩到这些内嵌进行切换,你也有能力定制第三方媒体的外观和感觉。

无限涡旋

正如上面所香港企业网站开发讨论的,只有当它适合您的站点的内容时,才能真正使用无限滚动。但是,如果你真的想在你的网站上启用无限滚动,你真的可以求助于两个插件。

第一个是Jetpack,其中包含一个InfinedScroll模块。只要稍加努力,它就可以处理大多数主题,但最好参考文献资料因为它是如何运作的。基本原则是,在激活模块之后,需要向函数s.php文件中添加少量代码,以使其正常工作。

add_theme_support( 'infinite-scroll'array(
    'container' => 'container',
    'footer' => 'page',
) );

“容器”参数用于定义内容的类名,而脚注参数用于向页面底部添加粘性页脚(因为用户无法一路滚动查看)。为了让它与主题一起工作,您可能还需要采取一些额外的步骤,但它的效果非常好。

另一个插件是Infinite-Scroll,它是几年前开发的,经过了一次完整的重写,以使其与WordPress兼容。这个插件很像Jetpack模块,尽管您可以使用插件的设置来定义您想要针对的容器的类。再次,您将需要确保您的所有帖子都没有分页安排,但您可以让它启动和运行相当快。

当然,如果您是一个优雅的主题用户,您应该查看起源主题,它内置了智能无穷大的卷轴。

关注表演

一项又一项研究证实了一个简单的事实。更快的页面加载会使用户更加满意。很多时候,丰富的媒体会使你的网站慢一些,然后把你的读者送到其他地方。如果实现得当,延迟加载可以是解决此问题的简单解决方案。不管是靠你自己,还是通过插件,懒散的加载方式都是一样的。香港企业网站开发在加载图像之前,要等到用户看到图像、视频或iframe。这对表演很有好处。





二维码