分享

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

推薦模板
查看更多

相關教程

解決織夢dedecms后臺驗證碼

dedecms網站被掛馬如何處理

DEDECMS織夢程序安裝教程

織夢DedeCMS 5.7SP1 download.p

解決Dedecmsv5.7 SP1廣告不能

織夢dedecms安裝提示dir怎么

dedecms如何刪除注冊時的“

dedecms安裝教程圖文教程

dedecms5.7百度主動推送(實時

dedecms如何實現不同欄目調

时时彩网四川快乐12