织梦开发>功能优化>正文
详情案例可参看本网站改造后的效果,目前覆盖首页、栏目页、内容页界面。
核心JS代码:
<script type="text/javascript"> var fgm = { on: function(element, type, handler) { return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent("on" + type, handler) }, bind: function(object, handler) { return function() { return handler.apply(object, arguments) } }, pageX: function(element) { return element.offsetLeft + (element.offsetParent ? arguments.callee(element.offsetParent) : 0) }, pageY: function(element) { return element.offsetTop + (element.offsetParent ? arguments.callee(element.offsetParent) : 0) }, hasClass: function(element, className) { return new RegExp("(^|\s)" + className + "(\s|$)").test(element.className) }, attr: function(element, attr, value) { if(arguments.length == 2) { return element.attributes[attr] ? element.attributes[attr].nodeValue : undefined } else if(arguments.length == 3) { element.setAttribute(attr, value) } } }; //延时加载 function LazyLoad(obj) { this.lazy = typeof obj === "string" ? document.getElementById(obj) : obj; this.aImg = this.lazy.getElementsByTagName("img"); this.fnLoad = fgm.bind(this, this.load); this.load(); fgm.on(window, "scroll", this.fnLoad); fgm.on(window, "resize", this.fnLoad); } LazyLoad.prototype = { load: function() { var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop; var iClientHeight = document.documentElement.clientHeight + iScrollTop; var i = 0; var aParent = []; var oParent = null; var iTop = 0; var iBottom = 0; var aNotLoaded = this.loaded(0); if(this.loaded(1).length != this.aImg.length) { for(i = 0; i < aNotLoaded.length; i++) { oParent = aNotLoaded[i].parentElement || aNotLoaded[i].parentNode; iTop = fgm.pageY(oParent); iBottom = iTop + oParent.offsetHeight; if((iTop > iScrollTop && iTop < iClientHeight) || (iBottom > iScrollTop && iBottom < iClientHeight)) { aNotLoaded[i].src = fgm.attr(aNotLoaded[i], "data-img") || aNotLoaded[i].src; aNotLoaded[i].className = "loaded"; } } } }, loaded: function(status) { var array = []; var i = 0; for(i = 0; i < this.aImg.length; i++) eval("fgm.hasClass(this.aImg[i], "loaded")" + (!!status ? "&&" : "||") + "array.push(this.aImg[i])"); return array } }; //应用添加 fgm.on(window, "load", function () {new LazyLoad("box")}); fgm.on(window, "load", function () {new LazyLoad("bxslider")}); </script>
在添加JS后直接在应用添加里面添加对应需要执行懒加载的区域即可,图片的代码调整为<img data-img="XXX"/>
内容页需要执行懒加载的话,参考:《dede手机站调用PC站图片》中函数的使用方法即可。需要帮助调整的,可在百家号贤话师兄处关注留言。
本文链接:https://www.weguiding.com/gnyh/516.html
- 上一篇:dede文章发布时间显示格式优化
- 下一篇:dede自定义表单提交后返回当前页面
猜你喜欢
- 2019-06-15 dede批量删除文章中的链接
- 2019-06-15 dedecms修改默认文档链接命名规则
- 2019-06-15 TAG字数限制修改 添加tag链接
- 2019-06-15 dedecms搜索指定多个栏目的文档
- 2019-06-15 织梦field标签常用字段名
- 2019-06-15 dede搜索结果页支持文章及SQL调用调整
- 2019-06-15 dede附加选项取消文章下载远程图片和资源勾选
- 2019-06-15 织梦文章字数统计调用修改
- 2019-06-15 dede缩略图做判断输出修改
- 01-24织梦文章内容页违禁词过滤及替换
- 06-22dede批量删除清空网站文章或指定文章
- 06-10dede修改文章发布默认为静态
- 07-26dede附加选项取消文章下载远程图片和资源勾选
- 06-20dede自定义表单自动获取时间和IP修改
- 06-19自定义表单限制指定时间内只能提交一次方法
- 07-03织梦field标签常用字段名
- 07-03dedecms修改默认文档链接命名规则
- 07-03TAG字数限制修改 添加tag链接
- 07-03dedecms搜索指定多个栏目的文档
- 07-03织梦field标签常用字段名
- 07-02dede搜索结果页支持文章及SQL调用调整
- 07-26dede附加选项取消文章下载远程图片和资源勾选
- 07-24织梦文章字数统计调用修改
- 01-24织梦调用自定义表单未审核信息条数
- 01-24织梦前端调用已审核自定义表单内容
- 01-24dede清空网站文章内容,且文章ID从1开始
- 01-24织梦文章内容页违禁词过滤及替换
- 01-24dede修改文章发布默认为静态
- 01-24dede调用自定义表单内容
- 01-24dede统计当前栏目文章量以及全站文章量
- 图文推荐