最近有朋友在群里面提問，我們的主題圖片預(yù)加載功能是如何實(shí)現(xiàn)的，既然大家覺得預(yù)加載的功能非常好，那么小編就專門寫一篇文章來介紹wordpress的預(yù)加載是如何實(shí)現(xiàn)的吧！

圖片預(yù)加載的介紹

預(yù)加載，顧名思義，在超出網(wǎng)站可視范圍內(nèi)，圖片不做加載，等到用戶滾動(dòng)瀏覽器窗口，圖片元素到達(dá)可視范圍內(nèi)，開始加載圖片，這樣的方式可以打打的節(jié)省網(wǎng)站的資源和加快網(wǎng)站加載的速度，所以對(duì)于圖片較多的wordpress網(wǎng)站來說，圖片預(yù)加載功能還是非常的好的。

圖片預(yù)加載的核心：lazyload。

對(duì)于lazyload有網(wǎng)站編程經(jīng)驗(yàn)的朋友應(yīng)該都很熟悉，圖片預(yù)加載的功能實(shí)現(xiàn)就是這個(gè)js文件來實(shí)現(xiàn)的。

使用lazyload有兩種方式，一種是使用插件，一種是直接集成在主題中的非插件方式，下面我們首先介紹一下非插件實(shí)現(xiàn)lazyload：

首先下載lazyload.js文件：jquery.lazyload.js

在wordpress主題中的header.php中加載這個(gè)文件：

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.lazyload.js"></script>
然后我們做出一些定義：
<script type="text/javascript">
DD_belatedPNG.fix('div, ul, img, li, input , a');//這里表示lazyload中的背景圖片在這些元素中
$(function() {
$("img.wp-post-image").lazyload({
placeholder : "<? bloginfo('template_url'); ?>/images/grey.gif", //這里填寫你的lazyload之前顯示的loading圖片
effect : "fadeIn"//加載時(shí)的動(dòng)畫效果為淡入
});
});
</script>

這樣，你wordpress網(wǎng)站就達(dá)成了lazyload的功能，是不是很簡(jiǎn)單呢？

如果你完全不懂編碼，不想自己動(dòng)手，那么就使用lazyload插件吧！? 在后臺(tái)插件搜索中，搜索插件jQuery lazyload，下載啟用即可，如果沒有效果可以在functions.php? 中添加一下代碼：
add_filter ('the_content', 'lazyload');
function lazyload($content) {
if(!is_feed()||!is_robots) {
$content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"loading1.gif\"\$3>\n<noscript>\$0</noscript>",$content);
}
return $content;
}

這樣即可完成lazyload的功能了！希望這篇文章對(duì)你有所幫助吧！