欢迎您的来访!有源码,好建站(www.hoogge.com)虎格网为您提供快速建站平台.

当前位置: 首页 > 行业资讯 > 源码教程 >

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

时间:2017-12-07 17:05来源:虎格网 作者:王小虎 点击:
我们在首页,栏目页,列表页都可以很容易加上相对应的属性,但是在文章页中所有内容都是在编辑器中,我们可以换个思路,替换一下编辑器中的内容就可以达到我们想要的效果,以下是侠客网对自己手上的项目自己按自己的功能找出来的办法,如有转载请注明出处,

我们在首页,栏目页,列表页都可以很容易加上相对应的属性,但是在文章页中所有内容都是在编辑器中,我们可以换个思路,替换一下编辑器中的内容就可以达到我们想要的效果,以下是侠客网对自己手上的项目自己按自己的功能找出来的办法,如有转载请注明出处,原创文章不易!谢谢!

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

下面把方法分享出来,希望可以帮助到需要这种效果的朋友!

修改目录include下的文件extend.func.php,在最后面添加一个函数方法

function replaceurl($newurl)

{

$newurl=str_replace('src=','class="lazy" data-original=',$newurl);

return $newurl;

}

另外调用文章正文内容的标签{dede:field.body/}

需要改成:

{dede:field.body function='replaceurl(@me)'/}

然后在文章区域中添加好JS,这就成了我们想要的效果!如果列表图片多的话,你也可以把它做进列表页。

然后在文章区域中添加好JS,这就成了我们想要的效果!

网站头部放入JS加载代码:

<script src="http://www.hoogge.com/css/lazyload.js"></script>

内容区间放入以下JS代码:

<script type="text/javascript" charset="utf-8">

$(function() {

$("img.lazy").lazyload({effect: "fadeIn"});

});

</script>

JS预加载插件:

最新版本 源代码压缩代码. 插件已经在 OSX 的 Safari 5.1, Safari 6, Chrome 20, Firefox 12 浏览器上, Windows 的 Chrome 20, IE 8 and IE 9 浏览器上, 以及 iOS5 (iPhone 和 iPad) 的 Safari 5.1 浏览器上测试过.

(责任编辑:王小虎)