Question

我的网站主页为div，其中包含六个divs和六个imgs。我想了解最佳方法，以便在移动网站上只投放一个div / img。我知道使用CSS重新组织页面有很多技巧，但我不希望imgs隐藏，我希望它们不会在移动设备上创建（在移动设备上）。我希望没有jQuery。这甚至可能吗？

HTML（完整尺寸）

<div id="mainContainer">
    <div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
    <div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
    <div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
    <div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
    <div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
    <div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
    <div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
    <div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
    <div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>
</div>

理想的HTML（移动尺寸）

<div id="mainContainer">
    <div class="imageHolder"><div class="imageContent"><img class="staging" alt="Example" src="example.png"></div></div>
</div>

Answer 1

在服务器端，而不是将链接放在src=标记的<img>部分的图片中，您可以将它们放入data-*标记，然后确定是否在桌面或移动浏览器上浏览网站，您可以编写javscript从data-*中取出相应的图像链接，并将它们放入src=标记。

Answer 2

您应检测浏览器是否为移动浏览器，然后才能正常运行。

首先，删除mainContainer中的元素并将它们放在一些JavaScript变量中，这样你的HTML应如下所示：

<div id="mainContainer">
</div>

你的Javascript就像这样：

var desktopElements = '<div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>' 
    +'<div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>'
    + ... ;
var mobileElements = '<div class="imageHolder"><div class="imageContent"><img class="staging" ald="a picture" src="example.png"></div></div>';

在desktopElements变量中放入所有div，在mobileElements变量中只放一个div。

然后在您的代码中，您将检测浏览器是否可移动，然后加载元素：

var isMobile = 'ontouchstart' in window,
    container = document.getElementById('mainContainer');

if (isMobile) container.innerHTML = mobileElements;
else container.innerHTML = desktopElements;

Answer 3

如果不使用JavaScript，则无法在客户端执行此操作。

浏览器加载甚至隐藏的元素。即使您将图像设置为隐藏元素的背景属性，它们也会加载图像。

唯一的解决方案是为移动设备生成不同的HTML（如果您使用PHP，JSP等），或者在呈现页面之前使用JavaScript删除不必要的图像元素。

如何向移动网站提供更少的图片

3 个答案: