CSS在Chrome中延遲加載

在Chrome中延遲加載CSS時，我遇到了一些定位問題的奇怪情況，例如，某些元素（絕對，相對和級聯）的定位有時會有巨大的空白。CSS在Chrome中延遲加載

基本上，我正在做的是通過鏈接標籤取消樣式表的標準加載，而是放置一個佔位符span-Tag，以便在稍後檢索URL身體標籤。之後，DOM滿載，我更換跨度標籤與所生成的鏈接標籤這樣的：

loadCSS: function() 
{ 
    var el = jQuery('.is_css'); 
    if(!el.length) return; 

    // Build link element 
    var linkEl = jQuery('<link />').attr({ 
     media: 'all', 
     type: 'text/css', 
     rel: 'stylesheet', 
     href: el.data('src') 
    }); 

    el.replaceWith(linkEl); 
}

我可以確認的是，CSS滿載的大部分元素都在尋找完全一樣，如果我嵌入CSS直接在head-Tag中。我的猜測是，Chrome在加載DOM之後加載CSS時，在某些情況下無法正確計算絕對或相對定位元素的位置。

我想爲您提供HTML/CSS代碼片段，遺憾的是，它不在範圍內來隔離虛假渲染的元素。所以相反，我問是否有人遇到類似的問題，可能會導致此行爲。也許有一些關於如何解決這些問題的一般提示。

親切的問候

來源

2015-06-16 Sutuma

你懶加載所有的CSS或者只是額外塊？ – diggersworld

你看過這個：https：//github.com/rgrove/lazyload - 它不再被更新或維護，但它可能會提供一個解決方案或基礎來創建自己的版本。 – Todd

如果在加載CSS後強制重繪**，會發生什麼情況？ [repaint snippet]（http://pastebin.com/V4YverjY） –

Sutuma，

你想能有強勁的表現影響的方法。作爲一個原則的CSS需要加載之前HTML DOM呈現有效。我的猜測是你的html在CSS加載前呈現。以下是您可以嘗試的選項： 1.在html標題標記中加載所有css 2.重新載入您的html頁面一個css內容被下載。 3.您可以使用html模板（需要js + require css插件）進行延遲加載。

require js， require-css plugin

來源

2015-06-26 11:31:53 sach

CSS在Chrome中延遲加載

回答

相關問題