避免在手机中加载图像

Avoid loading images in mobiles

本文关键字：加载 图像 手机      更新时间：2023-12-03

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

我使用这个：

<!-- 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/>标记它不会显示，这有点浪费时间和资源：）

将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="（据我所知，省略图像源是无效的），我在这篇文章中发现，最好的解决方案之一是使用这个只有26字节大的默认源：

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

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

相关文章：