非插件实现WordPress图片延迟加载效果 – lazyload

前端之家收集整理的这篇文章主要介绍了非插件实现WordPress图片延迟加载效果 – lazyload前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

lazyload 是一个 jQuery 插件,它可以延迟加载长页面中的图片。 在浏览器可视区域外的图片不会被载入,直到用户页面滚动到它们所在的位置。在包含很多大图片的长页面中,延迟加载图片可以加快页面加载速度,在某些情况下还可以帮助降低服务器负担。下面我们介绍一下如何使用此款 jQuery 插件中实现图片延迟加载的效果。

1. 下载 lazyload 源代码,将下载的压缩包解压,复制 jquery.min.js 和 jquery.lazyload.min.js,放到自己的主题目录。

2. 切换到主题目录,打开header.PHP,引用 jquery.min.js和jquery.lazyload.min.js,详细的使用代码如下:

Crayon-5c891d521fe7b438215572" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">header.PHP
Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-mixed-highlight" title="Contains Mixed Languages">
Crayon-button Crayon-nums-button" title="Toggle Line Numbers">
Crayon-button-icon">
Crayon-button Crayon-plain-button" title="Toggle Plain Code">
Crayon-button-icon">
Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">
Crayon-button-icon">
Crayon-button Crayon-expand-button" title="Expand Code">
Crayon-button-icon">
Crayon-button Crayon-copy-button" title="Copy">
Crayon-button-icon">
Crayon-button Crayon-popup-button" title="Open Code In New Window">
Crayon-button-icon">
Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">
Crayon-plain-wrap">
Crayon-main" style="">Crayon-table">Crayon-row">
Crayon-nums " data-settings="show">
Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">
Crayon-num" data-line="Crayon-5c891d521fe7b438215572-1">1
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe7b438215572-2">2
Crayon-num" data-line="Crayon-5c891d521fe7b438215572-3">3
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe7b438215572-4">4
Crayon-num" data-line="Crayon-5c891d521fe7b438215572-5">5
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe7b438215572-6">6
Crayon-num" data-line="Crayon-5c891d521fe7b438215572-7">7
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe7b438215572-8">8
Crayon-num" data-line="Crayon-5c891d521fe7b438215572-9">9
Crayon-code">
Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
Crayon-line" id="Crayon-5c891d521fe7b438215572-1">Crayon-ta">
Crayon-line Crayon-striped-line" id="Crayon-5c891d521fe7b438215572-2">Crayon-ta">
Crayon-line" id="Crayon-5c891d521fe7b438215572-3">Crayon-ta">

3. 还是在主题目录里,打开 functions.PHP 文件增加下面的代码代码的目的是自动图片添加 data-original 属性,以便实现 lazyload 延迟加载效果

Crayon-5c891d521fe8e597106700" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">functions.PHP
Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">
Crayon-button Crayon-nums-button" title="Toggle Line Numbers">
Crayon-button-icon">
Crayon-button Crayon-plain-button" title="Toggle Plain Code">
Crayon-button-icon">
Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">
Crayon-button-icon">
Crayon-button Crayon-expand-button" title="Expand Code">
Crayon-button-icon">
Crayon-button Crayon-copy-button" title="Copy">
Crayon-button-icon">
Crayon-button Crayon-popup-button" title="Open Code In New Window">
Crayon-button-icon">
Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">
Crayon-plain-wrap">
Crayon-main" style="">Crayon-table">Crayon-row">
Crayon-nums " data-settings="show">
Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">
Crayon-num" data-line="Crayon-5c891d521fe8e597106700-1">1
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe8e597106700-2">2
Crayon-num" data-line="Crayon-5c891d521fe8e597106700-3">3
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe8e597106700-4">4
Crayon-num" data-line="Crayon-5c891d521fe8e597106700-5">5
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe8e597106700-6">6
Crayon-num" data-line="Crayon-5c891d521fe8e597106700-7">7
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe8e597106700-8">8
Crayon-code">
Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
Crayon-line" id="Crayon-5c891d521fe8e597106700-1">Crayon-e">add_filterCrayon-h"> Crayon-sy">(Crayon-s">'the_content'Crayon-sy">,Crayon-h"> Crayon-s">'lazyload'Crayon-sy">)Crayon-sy">;
Crayon-line Crayon-striped-line" id="Crayon-5c891d521fe8e597106700-2">Crayon-t">functionCrayon-h"> Crayon-e">lazyloadCrayon-sy">(Crayon-sy">$Crayon-v">contentCrayon-sy">)Crayon-h"> Crayon-sy">{
Crayon-line" id="Crayon-5c891d521fe8e597106700-3">Crayon-h">Crayon-sy">$Crayon-v">loadimg_urlCrayon-o">=Crayon-e">get_bloginfoCrayon-sy">(Crayon-s">'template_directory'Crayon-sy">)Crayon-sy">.Crayon-s">'/loading.gif'Crayon-sy">;
Crayon-line Crayon-striped-line" id="Crayon-5c891d521fe8e597106700-4">Crayon-h">Crayon-st">ifCrayon-sy">(Crayon-o">!Crayon-e">is_FeedCrayon-sy">(Crayon-sy">)Crayon-o">||Crayon-o">!Crayon-v">is_robotsCrayon-sy">)Crayon-h"> Crayon-sy">{
Crayon-line" id="Crayon-5c891d521fe8e597106700-5">Crayon-h">Crayon-sy">$Crayon-v">contentCrayon-o">=Crayon-e">preg_replaceCrayon-sy">(Crayon-s">'//i'Crayon-sy">,Crayon-s">"\n"Crayon-sy">,Crayon-sy">$Crayon-v">contentCrayon-sy">)Crayon-sy">;
Crayon-line Crayon-striped-line" id="Crayon-5c891d521fe8e597106700-6">Crayon-h">Crayon-sy">}
Crayon-line" id="Crayon-5c891d521fe8e597106700-7">Crayon-h">Crayon-st">returnCrayon-h"> Crayon-sy">$Crayon-v">contentCrayon-sy">;
Crayon-line Crayon-striped-line" id="Crayon-5c891d521fe8e597106700-8">Crayon-sy">}

4. 在主题的根目录里放入一个加载的图片(GIF格式的),类似于下面的这张图片

loading-x

原文链接:https://www.f2er.com/wordpress/238516.html

猜你在找的wordpress相关文章