在用戶單擊javascript / jquery中的按鈕之前，如何防止元素加載？

Question

我已經搜索Google很長時間了，但是找不到合適的答案。

我有一個網站項目，需要一個彈出畫廊，但是在用戶單擊鏈接后，該畫廊應該加載在所有其他元素的頂部。 就像在Facebook中打開視頻時一樣，它會在所有其他視頻之前創建一個固定的div，然后加載視頻。

在css中，我嘗試了"display: none"但是它減慢了頁面加載時所有其他元素的加載。 我應該只在需要時才加載它，這樣就不會影響初始加載時間。

Answer 1

您需要避免設置圖像的src屬性，直到您要承擔加載圖像的開銷。

由於渲染頁面時無法設置src，因此需要將其放在其他位置，以便腳本可以找到它。 我建議使用數據屬性。

HTML：

<IMG data-src="http://mydomain/myimage1.png"/>
<IMG data-src="http://mydomain/myimage2.png"/>
<IMG data-src="http://mydomain/myimage3.png"/>
<A id="MyLink" href="#">Click here to load images</A>

還有你的jQuery

$("#MyLink").click(function(){
    $("IMG[data-src]").each(function(){
        $(this).attr("src",$(this).data("src"));
    });
});

jQuery將遍歷頁面上的所有IMG元素，讀取data-src屬性並將其填充到src屬性中，這將導致圖像加載。 不具有data-src屬性的圖像將被跳過（以防頁面上有一些不需要延遲加載行為的普通圖像）。