javascript - 带有 JS 的响应式/自适应 Web 的图像

Question

我正在为移动设备转换一个网站。如果我的代码结构如下，想知道用于为移动设备用户提供第二组图像的最佳实践吗？我已经在使用媒体查询为较小的设备提供不同的布局，并希望向移动用户提供第二组较小的图像。

            <div class="main_view">
                <div class="window">    
                    <div class="image_reel">
                        <a href=""><img src="pics/1.jpg" alt="" /></a>
                        <a href=""><img src="pics/2.jpg" alt="" /></a>
                    </div>
                </div>
                <div class="paging">
                    <a href="#" rel="1">1</a>
                    <a href="#" rel="2">2</a>
                </div>
            </div>

这个 html 引用了创建“图像 slider ”效果的 Javascript，类似于建议的 Here。 .该站点不必提供很多图像。我宁愿不重新设计整个站点以使用 css sprites 和背景图像。

我可以向仅使用移动设备的用户提供多组图像的最佳/最高效的浏览器方式是什么？例子赞赏。

谢谢你。

Answer 1

一种方法是将所有图像引用放在 CSS 中，并使用媒体查询来获取一组不同的 CSS 规则，这些规则指定较小的图像。您可以像这样将所有图像放在 CSS 中:

<a href=""><img id="img1" src="blank.gif" height="400" width="600"></a>

blank.gif 是一个 1x1 像素的透明 gif(完全不可见)，缩放到图像标签中的高度/宽度。它很小，很容易被浏览器缓存。

然后，在你的常规屏幕 CSS 中，你有这个:

#img1 {background: transparent url(pics/1.jpg) no-repeat;}

然后在由媒体查询指定的小屏幕 CSS 中，您有:

#img1 {background: transparent url(pics/1-small.jpg) no-repeat;}

使用这种 CSS 机制的一个显着优势是您不必加载一组较大的图像，然后在事后将它们更改为较小的图像。由于浏览器在解析 HTML 之前会遇到小型设备的媒体查询 CSS 样式表，因此它只会加载小图像。任何基于 javascript 的解决方案都必须等待 DOM 加载后才能“修补”正确的图像。