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

Question

我有一个网站，主页是一个 div，其中有六个 div 和六个 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=标签。