javascript / jquery檢測移動瀏覽器的最佳方法？

Question

對於正在工作的網站，我正在使用javascript實現圖像預加載，但是如果有人帶寬很慢，我當然不希望調用我的preload_images()函數。

對於我的市場，只有帶寬緩慢的人是在智能手機上使用移動互聯網的人。

檢測這些用戶的最佳方法是什么，這樣我就可以避免為他們預加載圖像？

---

選項1：檢測瀏覽器寬度

if($(window).width() > 960){ preload... }

---

選項2：使用要預加載的瀏覽器列表檢測用戶代理

if($.browser in array safelist){ preload... }

---

有更好的選擇嗎？

Answer 1

我發現我不喜歡那些決定應該在特定設備或環境上訪問哪個版本的網站的網站。 可以根據您確定的任何標准做出初始決定，這很不錯，但是，出於善意，請給我一個鏈接，我可以單擊該鏈接，以便選擇“更高帶寬的站點”，反之亦然，然后將其保存到Cookie中。 然后，我可以根據自己的判斷來覆蓋自動化腳本所犯的任何錯誤。

Answer 2

也許使用CSS @media指令以及隱藏對象？

.imagesToPreload {display:none;}
@media screen {
    #imageToPreload1 {background-image:url('blah.img');}
}
@media handheld {
    #imageToPreload1 {background-image:none;}
}

然后，在Javascript中，您可以獲取“ imagesToPreload”類中的所有對象，讀取backgroundImage屬性，如果不是，則將其預加載。

誠然，這是我的首要任務，我沒有測試這個想法。 像往常一樣，肯定有些事情我不在考慮...

Answer 3

我認為edeverett關於移動不一定一定要慢的觀點（類似地，桌面不一定一定要快）是一個很好的觀點。

切記不要為訪問者留下選擇-即大多數體面的移動瀏覽器都可以選擇不加載圖像（或專門不加載大圖像），還可以利用代理服務在下載之前壓縮圖像-一些移動訪問者可能希望完整地預加載您網站上的體驗。

另一個解決方案可能是這樣的： if($(window).width() < 320){ preload_smaller_images(); } if($(window).width() < 320){ preload_smaller_images(); }與台式機相比，移動瀏覽體驗受到的限制比以往任何時候都要少。

R. Hill的CSS建議雖然不是最壞的建議（如果可以在CSS中完成，則應該是imo），也可以按屏幕大小完成： @media handheld, screen and (max-width: 320px){ /* */ }