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(); } 与以往相比，移动浏览体验的理由比桌面更为有限。

R上。 Hill的CSS建议并不是最糟糕的（如果它可以在CSS中完成，它应该是imo），它也可以按屏幕大小完成： @media handheld, screen and (max-width: 320px){ /* */ }

使用javascript / jquery检测移动浏览器的最佳方法？

3 个答案: