如何在某些屏幕尺寸上只加載某些圖像？

Question

我認爲自適應設計，如果我有一組大尺寸的背景圖像，在大屏幕尺寸上彼此淡入淡出，並將它們隱藏在較小的屏幕尺寸上，它們仍然會加載較小的屏幕尺寸？如果圖像不顯示，我不想使用不必要的帶寬。看起來他們沒有加載我的電腦，但我很難測試每一個可能的設置。如果他們加載並且不默認顯示，有什麼方法可以解決這個問題嗎？另外，如果可能的話，我希望在不使用JavaScript的情況下工作。

Answer 1

是的，大多數瀏覽器都會下載圖片，即使您隱藏了它們。

只用html和css就沒有辦法停止圖像加載。 JS是做這件事的最好方法，它也很容易，所以你可能沒有別的選擇，只能使用javascript。

只要你決定使用javascript你應該檢查出lazyload，它使用起來非常簡單。

http://www.appelsiini.net/projects/lazyload

Answer 2

"Adaptive Images"檢測用戶的屏幕尺寸和自動生成特定大小的緩存。 我以前在我的一些項目中使用過它，它的功能就像一個魅力。

你可以找到更多信息here和here

而且你無法避免的Javascript，這是按我所知的唯一解決方案。但很容易，所有步驟都在上面的鏈接中給出。