Question

我在我的页面上使用媒体查询，如果屏幕很小，我会通过切换css显示属性来显示一些不同的HTML代码。

对于小屏幕，我展示：

<div id="slot-machine-mobile" class="row show-for-small-only">
    <div class="small-12 small-centered columns">
        <img src="/assets/img/test-img.jpg">
    </div>
</div>

但据我了解，即使只是使用大屏幕，也会下载此测试mg。有没有办法让图像在使用大屏幕时永远不会下载？

Answer 1

您可以创建一个块元素，并通过css为其分配背景图像。

<div class="img">

img { background-image:url("test-img.jpg"); }

所以你的HTML看起来像这样：

<div id="slot-machine-mobile" class="row show-for-small-only">
    <div class="small-12 small-centered columns">
        <div class="img"></div>
    </div>
</div>

Answer 2

你可以在这种情况下使用jquery来响应：在调整窗口大小时使用此代码

$( window ).resize(function() {
  if($( document ).width()>width_large_screen)
   {
     $('#slot-machine-mobile img').attr('src','....');
    }else
   {
    $('#slot-machine-mobile img').attr('src','....');
   }
});

当文件准备就绪时：

$(document).ready(function() {

      if($( document ).width()>width_large_screen)
    {
      $('#slot-machine-mobile img').attr('src','....');
    }else
    {
     $('#slot-machine-mobile img').attr('src','....');
    }
 });

尝试告诉我它是否可以，祝你好运

下载媒体查询中的资产

2 个答案: