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

How can I make it so that within the mobile version of my site the images are not downloaded to from the web server as these are large files that are not needed and not being used and therefore severely impacting the use of the mobile version of the site. Having looking at previous threads of such nature I saw that hiding the parent of the image using code such as below can benefit.

我怎样才能使我的网站的移动版本中的图像不会从Web服务器下载，因为这些是不需要和不使用的大文件，因此严重影响了网站的移动版本的使用。看过以前这种性质的线程后，我看到使用下面的代码隐藏图像的父级可以从中受益。

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

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

The problem being I don't want to use background image CSS for SEO issues associated with them as I like to use Schema tagging etc ..so how can I prevent an IMG tag from being downloaded, as display:none; only hides the image rather than stopping it being downloaded.

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

Note: This is not for copyright protection issues e.g. preventing right click etc etc but for speed and ultimately size of the downloaded content to mobile.

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

3 个解决方案

#1

This solution uses CSS to prevent background-images from loading and jQuery to prevent images from loading. I'm not familiar with any CSS solution that will prevent images from loading.

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

JS Fiddle: http://jsfiddle.net/CoryDanielson/rLKuE/6/

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

If you know the images height and width (or even ratio) ahead of time you could set the background-image for a bunch of fixed size DIVs. This might be applicable for icons and layout-type images. Look at the HTML/CSS below for an example of that.

如果您提前知道图像的高度和宽度（或均匀比例），则可以为一堆固定大小的DIV设置背景图像。这可能适用于图标和布局类型图像。请查看下面的HTML / CSS以获取示例。

Background Images

/* 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;
  }
}

and HTML

和HTML

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

---

---

Image Elements are a different story...

I don't know of any purely CSS solution to prevent them from loading the images. So I'd solve it like this:

我不知道任何纯粹的CSS解决方案，以防止他们加载图像。所以我会这样解决：

Define IMG tags as follows

定义IMG标签如下

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

Then, somewhere in the head of the document you need similar javascript

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

---

1) Function to load all of the images

1）加载所有图像的功能

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

2) Code to determine if the user is on mobile or a PC (slow vs fast connection) and then load the images. This code isn't bulletproof, there are much more accurate and reasonable tests than this.

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) As well as maybe some code to activate a button to load the images anyways? Why not, I guess... ?

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

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

---

Similar solution as here and what I hypothesized in the comments:

与此处类似的解决方案以及我在评论中假设的内容：

Delay image loading with jQuery

使用jQuery延迟图像加载

#2

There is no native solution in CSS that would prevent images from loading even if you hide them or set display to none.

CSS中没有本机解决方案，即使您隐藏图像或将显示设置为无，也会阻止图像加载。

You have to use some JS to achieve that result. If you are familiar with JS that should not be an issue at all. There are several plugins ready to go to do what you want. You can also write your own JS because its not that difficult.

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

Here is my code that loads images based on the screen size:

这是我的代码，根据屏幕大小加载图像：

DEMO AT CODE PEN

在代码笔上演示

It works without any libraries like JQ but if you use one of those it will automatically switch to it (Tweak it to your specific needs).

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

JS

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

HTML

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

However if you are a time loading freak you probably prefer to write your code natively in JS as you often don't use most of the jQuery library. For fast internet connection this is not a problem but if you target mobile devices on country side that might make a difference.

但是，如果你是加载怪胎的时候，你可能更喜欢在JS中本地编写代码，因为你经常不使用大多数jQuery库。对于快速的互联网连接，这不是问题，但如果您在国家/地区定位移动设备可能会有所作为。

#3

I would suggest combining perhaps the @import and @media commands to only @import the stylesheet which contains images if the @media tag meets you criteria (say, over a certain resolution).

我建议将@import和@media命令组合成@import包含图像的样式表，如果@media标签符合你的标准（比如说，超过某个分辨率）。

So by default you wouldn't import the stylesheet which applies the BG image, you'd only end up doing it if you had determined the site was 'non-mobile'..if that makes sense!

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

The W3c site has some decent examples of combining the rules:

W3c网站有一些很好的结合规则的例子：

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

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