Javascript 避免在手机中加载图像

我想避免在屏幕宽度小于1146px时在网站上加载图像。我尝试添加以下CSS规则：

@media only screen and (max-width: 1146px) {
#img_cabecera2 {display: none;}
}

当然，图像不会显示，但会加载。我只想在屏幕宽度超过1146px时加载图像。如何实现

我不介意解决方案是否使用CSS、Javascript、jQuery或PHP代码

编辑：

我是这样做到的：

template.html：

 <div id="img_cabecera2">
 <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" width="0" height="0" alt="">
 </div>

script.js：

$(function(){

/* Set img_cabecera2 size */

    function set_src() {
      var window_width = $(window).width();
      if (window_width < 1147) {
          $("#img_cabecera2").css({"display":"none"});    
      } else {
          $("#img_cabecera2 img").attr('width', 300).attr('src', "/public/img/carrete.png").attr('alt', "logo").attr('height','auto');
          $("#img_cabecera2").css({"top":"15px","left": "44%","display":"block"});
      }
    }


       set_src();


    $(window).resize(function() {
        set_src();
    });

/* ************************* */

...

$（函数（）{
/*设置img_cabecera2尺寸*/
函数集_src（）{
var window_width=$（window.width（）；
如果（窗宽<1147）{
$（“img#u cabecera2”）.css（{“display”：“none”}）；
}否则{
$（“#img_cabecera2 img”）.attr（'width'，300）.attr（'src'，“/public/img/carrete.png”）.attr（'alt'，“logo”）.attr（'height'，auto'）；
$（“#img_cabecera2”）.css（{“top”：“15px”，“left”：“44%”，“display”：“block”}）；
}
}
set_src（）；
$（窗口）。调整大小（函数（）{
set_src（）；
});
/* ************************* */
...

将css

显示：无；

添加到图像，并添加此jQuery代码：

function set_src() {
  var window_width = $(window).width();
  if (window_width < 1147) {
      $("#img_cabecera2").hide();
  } else {
      $("#img_cabecera2").attr('src', BIG).show(); // Change to your image link  
  }
}

$(document).ready(function(){
   set_src();

   $(window).resize(function() {
     set_src();
   });
});

---

如前所述，目前在纯CSS中无法做到这一点。我在过去使用过该脚本，并发现它非常可靠。

我使用此脚本：

<!-- This image is a blank, 2*2 image -->
<img src="/images/transparant.png"
     data-bigsrc="/images/big.jpg" 
     data-smallsrc="/images/small.jpg" />

---

可能很容易知道：显示在

上的图像：无

仍在加载，您只是看不到而已。

---

此外，使用（javascript-）函数删除图像也可能很慢，因为它仍然会触发图像的下载，但由于您删除了

标记，因此不会显示图像，这有点浪费时间和资源：）

那么没有javascript就无法获得它。纯css只能删除它。@TomChung-以及如何避免使用javascript和JQuery？if（window.width（）<1146）$（“img”）.remove（）；@rynhe这是一个很好的建议，但选择器应该是$（“#img_cabecera2”）@rynhe-无论如何都会加载图像…我想阻止加载图像。我不太喜欢这段代码，因为以下原因：这只适用于1个图像。如果你想要多个图像，你必须复制/粘贴。此外，javascript不应该包含新图像的位置，这不是JS的用途。但重要的是，这是base64代码使用起来很奇怪（imo），没有人会从头记住它。@Martijn base64代码是wierd，我同意，但如果你不想要那种奇怪的代码，你可以用一些1x1图像或你选择的类似图像来替换它。我选择base64代码是因为它几乎和图像一样小，所以它几乎没有impac“在页面加载时间上没有任何错误。@Martijn您对“1图像”的看法完全正确”-问题。我没有想到这一点，因为OP问了一个问题。你的答案更适合这种情况，尽管你可以在我的函数中轻松地应用

每个
循环。实际上，你可以用背景图像和媒体查询来做。但实际上，不能用纯图像。
<!-- This image is a blank, 2*2 image -->
<img src="/images/transparant.png"
     data-bigsrc="/images/big.jpg" 
     data-smallsrc="/images/small.jpg" />

function getProperImageSource(){
    var attr2use = $('body').outerWidth()>480 ? 'data-bigsrc' : 'data-smallsrc';
    $('img[data-smallsrc], img[data-bigsrc]').each(function(i){ 
        this.src = this.getAttribute(attr2use);
    });
}
$(document).ready({
    getProperImageSource(); // load images on init
    $(window).on('resize', function(){
        getProperImageSource();// again on resize
    });
});