dedecms织梦给图片加上data-original图片延时加载功能

2018-02-0105:53:39网站建设与开发 WEB前端开发Comments4,237 views字数 670阅读模式
dedecms织梦给图片加上data-original图片延时加载功能

下面把方法分享出来,希望可以帮助到需要这种效果的朋友!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

修改目录include下的文件extend.func.php,在最后面添加一个函数方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

function replaceurl($newurl)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

$newurl=str_replace('src=','class="lazy" data-original=',$newurl);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

return $newurl;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

另外调用文章正文内容的标签{dede:field.body/}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

需要改成:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

{dede:field.body function='replaceurl(@me)'/}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

然后在文章区域中添加好JS,这就成了我们想要的效果!如果列表图片多的话,你也可以把它做进列表页。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

然后在文章区域中添加好JS,这就成了我们想要的效果!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

网站头部放入JS加载代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

<script src="http://www.hoogge.com/css/lazyload.js"></script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

内容区间放入以下JS代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

<script type="text/javascript" charset="utf-8">文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

$(function() {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

$("img.lazy").lazyload({effect: "fadeIn"});文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

});文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

</script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

JS预加载插件:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

最新版本 源代码压缩代码. 插件已经在 OSX 的 Safari 5.1, Safari 6, Chrome 20, Firefox 12 浏览器上, Windows 的 Chrome 20, IE 8 and IE 9 浏览器上, 以及 iOS5 (iPhone 和 iPad) 的 Safari 5.1 浏览器上测试过.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/231.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/cms/231.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定