图像是否已加载并保持隐藏;他们装进了隐藏的潜水器


Are images loaded and remain hidden or aren't they loaded in hidden div?

在移动网站中,我使用隐藏幻灯片

#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是动态的,所以我认为这一定有效。您可以加载高图像并测试浏览中使用的数据。