网站打开速度也是是影响seo排名的一个关键词因素了。优化网站打开速度也是最简单的增加百度对网站的评分。图片很大的话,最好要做个图片懒加载。图片懒加载可以很明显的缩短网页的打开速度。
那么,dede织梦图片懒加载怎么做?
1、去网上找一个懒加载gif图
2、上传懒加载js库(附件中下载)
3、修改你要实现懒加载的标签代码
<img class="lazy" src="你的懒加载gif图片地址" data-original="图片地址" alt="" >
这里用到织梦内容页body替换函数来实现,这样的图片地址。具体方法附件里查看。
4、在网站底部</body>前加上
<!--图片懒加载JS-->
<script src="/js1/jquery-1.11.0.min.js"></script>
<script src="/js1/jquery.lazyload.js?v=1.9.1"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
</script>
<!--图片懒加载JS-->
上面是最简单的调用,但是一般而言,我们还有一些特殊的需求,比如想要提前一点点加载,避免网络过慢时加载缓慢,加载隐藏图片等等,lazyload都为我们提供相应的参数。
1.设置临界点
默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold 选项, 如:设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.
$("img.lazy").lazyload({ threshold : 200});
2.使用特效
默认情况下,图像完全加载并调用show()。你可以使用任何你想要的效果。下面的代码使用fadeIn (淡入效果)
$("img.lazy").lazyload({effect: "fadeIn"});
3.当图片不连续时
滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.
$("img.lazy").lazyload({failure_limit : 20});
将 failurelimit 设为 20 ,当插件找到 20 个不在可见区域的图片时停止搜索.
4.加载隐藏图片
当界面有很多隐藏图片的时候并希望加载他们的时候则使用kip_invisible 属性,将其设置为false
$("img.lazy").lazyload({skip_invisible : false});
5、附上织梦文章内容页图片懒加载下载地址:
链接:https://pan.baidu.com/s/1cBYXK0vFXSbk58VC0WWLXg
提取码:咨询本站站长QQ:862782808(点击QQ号即可直接咨询)获得
插件下载说明
未提供下载提取码的插件,都是站长辛苦开发,联系客服或站长有偿获得!
织梦二次开发QQ群
本站客服QQ号:862782808(点击左边QQ号交流),群号(383578617) 如果您有任何织梦问题,请把问题发到群里,阁主将为您写解决教程!
转载请注明: 织梦模板 » 织梦文章内容页图片懒加载最新版