WordPress博客运用Lazyload 图片延迟加载功能
发布时间：2022-06-24 10:36:37 所属栏目：教程 来源：互联网
导读：Lazyload插件可以让我们网站省不少流量了,Lazyload的功能就是让不可视区域图片不加载,等等我们加载之后就可以自动加载图片了,下面我们来看看Lazyload在wordpress中使用方法. 博客之前用的这个方法来延迟加载图片的,感觉上图片是延迟加载了,但这并不是真正的
|
Lazyload插件可以让我们网站省不少流量了,Lazyload的功能就是让不可视区域图片不加载,等等我们加载之后就可以自动加载图片了,下面我们来看看Lazyload在wordpress中使用方法. 博客之前用的这个方法来延迟加载图片的,感觉上图片是延迟加载了,但这并不是真正的延迟,打开含有图片的页面时,还会加载所有的图片,另外jquery.lazyload.js最新代码已经改过了,再用以前的方法也失效了. 现在,大神们解决了此问题,原来 jQuery lazyload 插件说要把图片的地址写入 data-original 属性,loading 图片地址写入 URL 属性才能实现真正图片稍后载入(lazyload),也就是说要修改图片的html结构. 修改前:<img src=“img/example.jpg”> 修改后:<img data-original=“img/example.jpg” src=“img/grey.gif”> 上述代码中,img/example.jpg 是真正要显示的图片地址. jQuery lazyload的使用 完整jQuery lazyload 图片延迟加载方法设置如下. 第一步:加载jQuery相关文件。 你要加载jQuery和这个插件,你可以使用以下代码,加载这几个文件: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script> 第二步:定义图片结构。 按照官方的建议,定义你的img结构: <img src="img/grey.gif" data-original="img/example.jpg"> 第三步:触发这个插件,生效,激活以下,你就可以在目标中使用了. $(“img.lazy”).lazyload(); 使用jQuery lazyload的优点 优点已经说的太多了,这里就不赘述了. 使用jQuery lazyload的缺点,缺点也有,这里也不赘述了,这里要提一个最大的缺点就是,此方法不方便操作,因为每次都按这个html结构来插入图片,那工作量陡增许多，而且有可能导致图片根本不显示,因此,young为wordpress写了一串如下代码,用正则表达式重组一下img标签，放在主题的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; } 上述代码中loading1.gif建议使用绝对路径,比如 http://www.phpfensi.com /images/loading.gif 但是这个代码loading.gif地址不能通用,每个人还需要再修改成自己的地址,为此我专门请教了young,重新修改了一下代码,只需要将loading.gif放置到主题文件夹就可以了. add_filter ('the_content', 'lazyload'); function lazyload($content) { $loadimg_url=get_bloginfo('template_directory').'/loading.gif'; if(!is_feed()||!is_robots) { $content=preg_replace('/<img(.+)src=['"]([^'"]+)['"](.*)>/i',"<img$1data-original="$2" src="$loadimg_url"$3>n<noscript>$0</noscript>",$content); } return $content; }。 （编辑：均轻资讯网_我爱站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐