图像是否已加载并保持隐藏或未加载到隐藏的div中？

Question

在移动网站中，我使用以下方法隐藏幻灯片：

#slideshow{ display: none}

图像加载并保持隐藏或不加载？我应该使用服务器端PHP来避免加载图像源吗？ 如果加载，我该怎么做才能更快地浏览并避免在移动设备中传输更多数据？

任何意见和建议都将受到高度赞赏。我不希望网站在移动设备上看起来更好，我的目标是使代码更完美......

Answer 1

我认为这取决于定义加载/不加载图像的浏览器。大多数现代浏览器都是为了提供更好的浏览器体验。因此，就速度而言，图像被加载为异步。所以，它很少重要。但是，根据数据，如果我是你，我会改变PHP脚本并摆脱它，因为你关心更好的Web结构。它可能需要付出很多努力，但它比有时加载图像的Javascript更好。

这有助于您在PHP中检测移动设备： Simplest way to detect a mobile device

Answer 2

回答你的问题：

在MOST浏览器中加载图片。不是全部。要进行测试，请在浏览器中尝试此页面并查看结果：

Display IMG test

如何避免这种情况：除了jQuery方法之外，响应式设计中的一种常用方法是使用 DATA URI ，如下所示：

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

这样做的好处是你使用较少的请求而不下载，除非它在可见元素上，所以这是一个双赢局面

Answer 3

是的，当您使用手机上加载的#slideshow{ display: none}幻灯片图片

时

你在幻灯片中避免这种情况，我建议你使用：

   $(document).ready(function(){
    if ($(window).width() < 960) {
       $("#slideshow").remove( );
    }
});

Answer 4

如何使用jQuery删除内容：

$("#slideshow").html("");

这使得内容一无所获。但我不确定这是否不流。由于Javascript DOM是动态的，我认为必须有效。您可以加载高图像并测试浏览时使用的数据。