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引用了一个创建“图像滑块”效果的Javascript，类似于建议的Here。该网站不必提供很多图像。我宁愿不重新设计整个网站使用CSS精灵和背景图像。

我可以向移动设备用户提供一组图像的最佳/最具浏览效率的方法是什么？举例赞赏。

谢谢。

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加载才能在正确的图像中“修补”。

Answer 2

如果用户代理是非移动设备，您可以在图片代码中使用自定义属性，指定用于非移动设备的图像，而不是将src属性更改为此值。你可以这样做（伪代码）：

 $(document).ready(function() {
     if(!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
       $('.mobile').each(function() {
          $(this).attr('src',$(this).attr('high-res-img'));
       });
     }
 });

 <img class="mobile" src="images/your-mobile-image.jpg" high-res-img="images/mobile-image.jpg" alt="" />

Answer 3

另一种选择是（如果启用了javascript，可能是你正在使用滑块）使用js测试移动设备，然后使用适合移动设备的html代码替换滑块的html代码，滑块脚本运行/初始化。

使用JS的响应/自适应Web的映像

3 个答案: