您好,微信里搜索“it才子”或者“itcaizi”關注公眾號,贈送創富教程和資料。

當前位置: 首頁 > 行業資訊 > 源碼教程 >

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.dqcakj.tw/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 瀏覽器上測試過.

(責任編輯:admin)
时时彩网四川快乐12