在移动网站中,我使用隐藏幻灯片
#slideshow{ display: none}
图像加载并保持隐藏还是不加载?我应该使用服务器端PHP来避免加载图像源吗?如果它们加载了,我该怎么办才能更快地浏览并避免移动设备中出现更多数据流?
如有任何意见和建议,我们将不胜感激。我不希望这个网站在移动中看起来更好,我的目标是让代码变得完美。。。。
我认为这取决于定义加载/不加载图像的浏览器。大多数现代浏览器这样做是为了提供更好的浏览器体验。就速度而言,图像是异步加载的。所以,这并不重要。但是,根据数据,如果我是你,我会更改PHP脚本并将其删除,因为你关心更好的Web结构。它可能需要付出很多努力,但它比Javascript要好,后者有时会在图像之后加载。
这有助于您在PHP中检测移动设备:检测移动设备的最简单方法
回答您的问题:
图像在MOST浏览器中加载并非全部。为了进行测试,请使用浏览器尝试此页面并查看结果:
显示IMG测试
如何避免这种情况:除了jQuery方法之外,响应式设计中的一种常见方法是使用DATAURI,如下所示:
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
这样做的优点是,您使用的请求较少,并且除非在可见元素上,否则不会下载,因此这是一种双赢的情况
当您使用在手机上加载的#slideshow{ display: none}
幻灯片图像时是的
你在幻灯片中要避免这种情况,我建议你使用类似:
$(document).ready(function(){
if ($(window).width() < 960) {
$("#slideshow").remove( );
}
});
如何使用jQuery删除内容,如:
$("#slideshow").html("");
这使得内容什么都没有。但我不确定这是否会继续下去。由于Javascript DOM是动态的,所以我认为这一定有效。您可以加载高图像并测试浏览中使用的数据。