簡體   English   中英

用於在網頁中按需加載圖像,視頻的腳本

[英]script to load images,videos on demand in web page

一些公告板系統或內容管理系統允許用戶撰寫包含圖像和視頻的帖子。 可以使用imgembed等標簽插入圖像和視頻。

我想做的是,讓讀者決定是否加載圖像和視頻。 換句話說,我想放置一些占位符,表示Click to load 下面的圖片是我想要的。 但這是Web瀏覽器的功能。 我想在服務器端或客戶端中實現它。

我想要此功能的原因是,某些大圖像,GIF和自動播放視頻不利於手機或某些人。


(來源: osxdaily.com


(來源: howtogeek.com

一個簡單的想法是,檢查標簽img並以正則表達式embed在某個已知區域,例如<div id="contents"></div> 如果命中了正則表達式,則將其替換為占位符和定制的javscript或PHP函數click_to_load()

在從頭開始之前,我想知道是否已經有一個這樣的庫實現了它。

您可以根據需要在純JavaScript中按需加載。 如果要在JavaScript中編寫功能click_to_load() ,您所需要做的就是在HTML中創建沒有源的圖像,然后單擊按鈕更改JavaScript中的源。

function click_to_load() {
    document.getElementById("image").src = "http://i.imgur.com/AXTI1Gr.gif";
}

此功能將圖像源更改為貓的.gif

現在只需使用此javascript添加按鈕

document.getElementById("button").onclick = click_to_load;

有效的示例代碼

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM