在桌面分揀機中裝載圖像懶惰

從服務器上我得到的HTML與表格。在桌面分揀機中裝載圖像懶惰

爲了很好地渲染這張表，我使用了table-sorter jquery插件。

我遇到了以下問題：

當表足夠長的頁面加載速度很慢。調查結果 - 與圖像下載相關的問題。例如，我在表格中有100個表格行。我有5行分頁。
每一行都有圖像，最初在瀏覽器網絡中加載頁面時，我看到所有100個圖像都加載了。

我只想在真正需要時才能實現圖像加載。

我沒有解決這個任務的過程。

請建議解決方案。

來源

2015-10-23 gstackoverflow

您正在使用顯示/隱藏元素的假分頁。但是您的圖像存在於DOM中，因此它們正在加載。你需要做的僅僅是維護DOM中所需的元素，並根據需要更新DOM。 – Rayon

@Rayon Dabre它不太舒服。我鬆散的桌子分揀機功能。也許有可能不要渲染隱藏的圖像 – gstackoverflow

在這種情況下，另一個選擇是使用'data-src'作爲屬性並在內容可見時加載圖像，這很有意義嗎？ – Rayon

閱讀您的問題後，我決定到lazyload小工具添加到我的fork of tablesorter ...它目前只在主分支

widget-lazyload.js
：GitHub的倉庫中

如果您下載或安裝存儲庫，請運行該演示以查找有關如何設置和使用小部件的文檔。

我打算儘快製作一個新版本，以防萬一你想等。

來源

2015-10-26 02:38:20 Mottie

它只是太棒了） – gstackoverflow

我會等待你的發佈 – gstackoverflow

你可以有使用lazysizes：https：//github.com/aFarkas/lazysizes/。它可以自動與其他JS組件（滑塊，表格）配合使用。只需添加lazyload類並使用'data-src'而不是'src'。 –

首先，您需要從服務器端獲取必要的html（表的第一頁），並根據需要更新DOM ..也許再次詢問服務器端。

那麼你最好懶惰加載這些圖像使用像Lazy Load Plugin for jQuery。

可能是像這樣簡單一個：

function init() { 
    var imgDefer = document.getElementsByTagName('img'); 
    for (var i = 0; i < imgDefer.length; i++) { 
     if (imgDefer[i].getAttribute('data-src')) { 
      imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src')); 
     } 
    } 
} 
if (document.readyState == 'complete') { 
    init(); 
} else { 
    window.onload = init; 
}

jsfiddle

來源

2015-10-23 09:43:47 kaze13

由於您不想丟失桌面分揀機功能，因此您可以嘗試使用Lazy Load插件。 – kaze13

據我所知，這個插件通過窗口邊界檢測可見性。 – gstackoverflow

我認爲，如果圖像在視口中，它只是表現得像** data-src **提到的@Rayon Dabre – kaze13

在桌面分揀機中裝載圖像懶惰

回答

相關問題