自己要用的,先转载收藏了。
通常来说,一个正常web页面是由图片和文字以及各种CSS,JS构成,而这其中,拖慢网速的罪魁祸首就是图片。懒加载即将页面中的图片分布加载,边浏览边加载,从而减轻服务器压力以及减轻流量的浪费。
首先在主题引入JS
//主题中已引用Jquery可省略这行 $(function(){ $("img").lazyload({ effect:"fadeIn"}); $("img").lazyload({ threshold :200}); });
为图片自动添加 data-original 属性
在主题文件夹function.php文件夹加入以下函数
//小文's blog图片链接添加data-original 属性函数add_filter ('the_content','lazyload');functionlazyload($content){ $loadimg_url=get_bloginfo('template_directory').'/images/loading.gif';//loading图片地址,根据个人情况修改if(!is_feed()||!is_robots) { $content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1src=\"$loadimg_url\" data-original=\"\$2\"\$3>\n<noscript>\$0</noscript>",$content); }return$content;}//END
最后在主题文件夹的/images/文件夹下添加loading.gif图片