Question

当屏幕宽度小于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();
    });

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

...

Answer 1

我用这个：

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

将此作为javascript

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
    });
});

可能会很方便地知道：display: none上的图片仍在加载，你只是看不到它。
此外，使用（javascript-）函数删除图像也很慢，因为它仍然可以触发图像的下载，但是因为你删除了<img/>标记它不会被显示，有点浪费时间和资源：）

Answer 2

将css display:none;添加到图像并添加此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();
   });
});

为了避免图像被不必要地预加载，而不仅仅有一个默认的空src =“”（根据我的理解，省略图像源是无效的），我发现this post这是最好的解决方案之一是使用这个只有26个字节的大默认来源：

src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D"

Answer 3

正如已经提到的那样，目前在纯CSS中无法做到这一点。我过去使用过picturefill脚本并且发现它非常可靠。

避免在手机中加载图片

3 个答案: