僅當屏幕高於一定尺寸時才加載nivo型滑塊

許多專業設計的模板爲主頁提供了滑塊形式（例如滑塊革命，nivo等）。僅當屏幕高於一定尺寸時才加載nivo型滑塊

雖然它們可能會有響應，但我發現在移動設備上測試時，動畫通常不是很流暢，並且會減慢加載和處理時間。在某些情況下，滑塊中正在進行的動畫似乎會干擾頁面的顯示和滾動，具體取決於手機的質量。

所以，我想保留臺式機的滑塊，但不適用於手持設備。我知道它，如果滑塊在一個包含div（div＃sliderWrap，說）我可以很容易地設置滑塊簡單地invisibile（顯示：隱藏），如果我要使用CSS3媒體查詢。

但是，這仍然意味着滑塊仍然會加載其中的所有對象，因爲它們位於主HTML中，因此仍會減慢頁面加載時間並減少不必要的數據使用量。

我想知道是否可以使用iframe，然後只在屏幕尺寸高於某個寬度（例如960像素）時將滑塊加載到框架中？我想這可能是用javascript/jquery完成的。

所以，我想我的目標是在主頁上有一個iframe，有一些js說，如果頁面大於960px，請將slider.html加載到iframe中。 Slider.html將包含通常出現在主頁html中的所有滑塊信息，包括滑塊需要運行的JavaScript。

如果有人能就此提出建議，我會非常感激，或者只是您對替代方案的想法？我的JavaScript知識是最小的，因爲你可能已經收集 - 我的專業知識主要在html4和css2，我只是趕上！ - 所以請接受我的道歉，如果我的詞彙量不夠精確，也許它應該是這樣的論壇！

在此先感謝。

來源

2013-08-25 Stuart Gibbins

您可以使用CSS媒體查詢來檢查屏幕大小並相應地更改樣式。例如，您可以使用：

@media only screen and (min-width : 960px) { 
/* put slider code in here */ 
}

這將意味着滑塊樣式僅在窗口寬度至少爲960像素時使用。您可以使用它來隱藏滑塊元素，但它仍然會加載滑塊功能的JS文件。你可以使用jQuery來加載腳本，當窗口至少960像這樣：

$(document).ready(function() { 
    if ($(document).width() > 960) { 
     var script = document.createElement('script'); 
     script.type = 'text/javascript'; 
     script.src = "url of slider JS file"; 
     $("#sliderElement").append(script); 
    } 
});

希望這不是太混亂！

來源

2013-08-26 03:13:08 everydayghost

僅當屏幕高於一定尺寸時才加載nivo型滑塊

回答

相關問題