javascript - 避免在手机中加载图像

Question

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

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

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

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

编辑:

我是这样实现的:

模板.html:

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

脚本.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/> tag 不会显示，有点浪费时间和资源:)