防止图像被下载到移动网站上的页面

Question

我怎样才能做到这一点，以便在我的网站的移动版本中，图像不会从网络服务器下载到，因为这些是不需要且未使用的大文件，因此会严重影响移动版本的使用的网站。在查看了以前此类性质的线程后，我发现使用如下代码隐藏图像的父级会受益。

.parent {display:block;}
.background {background-image:url(myimage.png);}

@media only screen and (max-width:480px) {
.parent {display:none;}
}

问题是我不想将背景图像 CSS 用于与它们相关的 SEO 问题，因为我喜欢使用 Schema 标记等 ..所以如何防止 IMG 标记被下载，如 display:none;仅隐藏图像而不是停止下载。

注意：这不适用于版权保护问题，例如防止右键单击等，但为了速度和最终下载内容到移动设备的大小。

Answer 1

如果@media 标签符合您的标准（例如，超过一定的分辨率），我建议将@import 和@media 命令组合起来，以仅@import 包含图像的样式表。

因此，默认情况下，您不会导入应用 BG 图像的样式表，只有在您确定该网站是“非移动”时，您才会最终这样做......如果这有意义的话！

W3c 网站有一些很好的规则组合示例：

http://www.w3.org/TR/css3-mediaqueries/#media0

Answer 2

此解决方案使用 CSS 来阻止加载背景图像并使用 jQuery 来阻止加载图像。我不熟悉任何会阻止加载图像的 CSS 解决方案。

JS 小提琴： http://jsfiddle.net/CoryDanielson/rLKuE/6/

如果您提前知道图像的高度和宽度（甚至比例），您可以为一组固定大小的 DIV 设置 background-image。这可能适用于图标和布局类型的图像。查看下面的 HTML/CSS 示例。

背景图片

/* hidden by default */
aside {
    display: none;
}

/* Pictures load for 'big screen' users.. pcs/tablets? */
@media screen and (min-width: 750px) {
  aside {
      display: block;
  }

  .catpicDiv {
    height: 100px;
    width: 100px;
    display: inline-block;
    border: 1px solid red;
    background-image: url('http://img2.timeinc.net/health/images/slides/poodle-1-400x400.jpg');
    background-size: cover;
  }
}

和 HTML

<aside>
    <div class="catpicDiv"></div>
    <div class="catpicDiv"></div>
    <div class="catpicDiv"></div>
</aside>

---

---

图像元素是另一回事...

我不知道有任何纯 CSS 解决方案来阻止它们加载图像。所以我会这样解决它：

如下定义IMG标签

<img src="" data-src="url-to-image.jpg" />

然后，在文档头部的某处你需要类似的 javascript

---

1) 加载所有图片的函数

function loadAllTheImages() {
    $("img").each(function(){
        $(this).attr('src', $(this).attr('data-src'));
    });
}

2) 确定用户是使用移动设备还是 PC（慢速与快速连接）然后加载图像的代码。 这段代码不是万无一失的，还有比这更准确合理的测试。

$(window).load(function(){
    if ( $(window).width() > 750 ) {
        loadAllTheImages(); // !
    } else {
        $("body").append("<a id='mobileCheck' href='javascript: void(0);'>I GOTS 4G, LEMME HAVE EM!</a>");
    }
});

3) 还有一些代码可以激活按钮来加载图像吗？为什么不呢，我猜...？

$(document).ready(function(){
    $('body').prepend("<h1>" + $(window).width().toString() + "</h1>");
    $('body').on('click', '#mobileCheck', function(){
        loadAllTheImages(); // !
        $("#mobileCheck").remove();
    });
});

---

与此处类似的解决方案以及我在 cmets 中的假设：

Delay image loading with jQuery

Answer 3

CSS 中没有原生解决方案可以阻止图像加载，即使您隐藏它们或将显示设置为无。

你必须使用一些 JS 来实现这个结果。如果您熟悉 JS，那根本不是问题。有几个插件可以做你想做的事。您也可以编写自己的 JS，因为它并不难。

这是我根据屏幕尺寸加载图像的代码：

DEMO AT CODE PEN

它可以在没有像 JQ 这样的库的情况下工作，但如果您使用其中一个库，它会自动切换到它（根据您的特定需求调整它）。

JS

// use jQuery or pure JS
if (typeof jQuery !== 'undefined') {
  // jQuery way
  // alert("jquery");

  $(function() {
    $(window).on('load resize', function() {
      var products = $("[data-product-image]");
      products.each(function(key, value) {
        var bg = null;
        if (window.outerWidth < 500) return;
        if (window.outerWidth < 1000) bg = $(value).data("product-image-s");
        if (window.outerWidth >= 1000) bg = $(value).data("product-image");
        console.log($(window).outerWidth);
        $(value).css({
          'background-image': 'url(' + bg + ')',
          'background-position': 'center',
          'background-size': 'cover',
        });
      });
    });
  });
} else {
  // Pure JS way
  // alert("JS");

  (function() {
    window.addEventListener('load', wlImageLoader);
    window.addEventListener('resize', wlImageLoader);
    function wlImageLoader() {
      console.log('event! Trig trig');
      var all = document.getElementsByTagName("div");
      var products = [];
      for (i = 0; i < all.length; i++) {
        if (all[i].hasAttribute('data-product-image')) {
          products.push(all[i]);
        }
      }
      Array.prototype.forEach.call(products, function(value) {
        var bg = null;
        var curent = window.getComputedStyle(value).getPropertyValue('background-image');
        console.log(curent);
        if (window.outerWidth < 500 || curent != 'none') return;
        if (window.outerWidth < 1000 && curent == 'none') bg = value.getAttribute('data-product-image-s');
        if (window.outerWidth >= 1000 && curent == 'none') bg = value.getAttribute('data-product-image');
        // if (window.outerWidth >= 2000 && curent == null) bg = value.getAttribute('data-product-image-l');
        if(bg == null || curent != 'none') return;
        value.style.backgroundImage = "url(" + bg + ")";
        value.style.backgroundPosition = "center";
        value.style.backgroundSize = "cover";
        curent = window.getComputedStyle(value).getPropertyValue('background-image');
        console.log(curent);
      });
    }
  })();
}

HTML

<div data-product-image="img/something_normal.jpg" data-product-image-s="img/something_small.jpg" id="p3" class="product">

但是，如果您是一个时间加载狂，您可能更喜欢在 JS 中本地编写代码，因为您通常不使用大部分 jQuery 库。对于快速的互联网连接，这不是问题，但如果您将移动设备定位在乡村，这可能会有所作为。