这个功能是 xiu 主题自带的。
在网站中适时的使用图片延迟加载,可以减少请求,显著的提高多图片页面的加载速度。这也需要适当的使用图片延迟加载,图片延迟加载和无限下拉加载一样,对 js 支持不太好的搜索引擎不太友善,虽然大幅度的提高了网站的访问速度,但是搜索引擎也搜索不到了。大家可以根据需要自己选择
jQuery 图片延迟加载 Lazyload。前提自然添加了 Jquery,代码:
<script type="text/javascript"> var _doLazyload = function ($el) { var placeholder = $el.attr('placeholder'); if (!$el.attr('src') && placeholder) $el.attr('src', placeholder); var source = $el.attr('data-source'); var eTop = $el.offset().top; //元素的位置 var validateDistance = $(window).height(); var loadMinHeight = $(document).scrollTop() - validateDistance; var loadMaxHeight = $(document).scrollTop() + validateDistance; if (eTop < loadMinHeight || eTop > loadMaxHeight) return; var type = $el.data('type'); if (type == 'base64') { $.ajax({ url: source, success: function (data) { _injectImg($el, data); }, isBlock: false }); } else { var img = new Image(); img.src = source; if (img.complete) { _injectImg($el, source); img = null; } else { img.onload = function () { _injectImg($el, source); img = null; }; } } }; var _injectImg = function ($el, data) { if (!$el.attr('data-source')) return; $el.fadeOut(200, function () { $el.css('opacity', '0'); $el[0].onload = function () { $el.fadeIn(200, function () { $el.css('opacity', '1'); }); }; $el.attr('src', data); }); $el.removeAttr('data-source'); }; function Lazyload() { var $el = $("body"); if ($el.data('source')) { _doLazyload($el); } else { var lazyloads = $el.find('img[data-source]'); for (var i = 0; i < lazyloads.length; i++) { _doLazyload($(lazyloads[i])); } } } </script>
在滚动事件中加入图片延迟加载代码:
$(document).scroll(function() { Lazyload(); });
然后需要修改 wordpress 主题图片调用格式:
img 标签的写法:
<img data-source="http://www.***.com/***.jpg" placeholder="" alt="" />
data-source 是图片的实际地址,placeholder 是未加载图片时显示的默认地址。
你可能对这些文章感兴趣:
- WordPress自定义字段控制是否显示Div标签
- xiu主题设置友情链接多列显示
- WordPress CMS分栏制作详解
- 今天发现后台登录很慢
- 216讲DIV+CSS入门视频教程免费送
- Xampp2016打开php文件提示Call to undefined function curl_init()
- WordPress判断文章分页的第1页和最后1页
- 公告:陌小雨博客个人博客大全第二次死链清理结果
- 如何提取评论中的图片地址
- WordPress根据用户名获取用户id:get_user_by()
- 如何防止多说剽窃我们的网站内容
- WordPress文章页添加展开/收缩功能
- WordPress估计文章阅读时间
- 完全改造WordPress后台登陆指南
如有疑问,请前往问答中心反馈!
反馈