如何为移动站点提供更少的图像

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 (Mobile Size)

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

Answer 1

在服务器端，而不是把链接到<img>标签的src=部分的图像，你可以把它们放到data-*标签，然后在你建立你的网站是在桌面还是移动浏览器上浏览，你可以写javascript采取相应的图像链接(s)的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删除不必要的图像元素。