防止Bootstrap预加载所有hidden- *图像 [英] Prevent Bootstrap from preloading all the hidden-* images

问题描述

我正在运行Twitter Bootstrap 3.2。

我的页面有每个断点的横幅图像。这意味着这样的代码：

 < img class =visible-xs img-responsivesrc =headline-768px。 JPG> （128kb）
< img class =visible-sm img-responsivesrc =headline-992px.jpg> （144kb）
< img class =visible-md img-responsivesrc =headline-1200px.jpg> （264kb）
< img class =visible-lg img-responsivesrc =headline-2000px.jpg> （380kb）
  

拥有4个不同图像的主要目的是让移动设备不需要下载更大的版本。但无论屏幕大小如何，Bootstrap都会预加载所有版本，即使它们隐藏在当前断点处。对于每个观众来说，这相当于数百个不必要的kb。

有没有解决方法呢？

解决方案

问题演示：

更深入，但基本解决方案的工作原理如下：

创建一个简单的div：

 < div class =responsiveBackgroundImageid =myImage>< / div> 
  

然后根据屏幕尺寸选择正确的背景图像：

我们可能希望所有背景图片共享一些基本属性，如下所示：

  .responsiveBackgroundImage {
 width：100％; 
背景大小：100％; 
背景位置：50％0％; 
 background-repeat：no-repeat; 
} 
  

然后替换 background-image 每个分辨率下此特定元素的属性：

  #myImage {background-image： URL（http://placehold.it/768x150）; } 
 @media（min-width：768px）{＃myImage {background-image：url（http://placehold.it/992x150）; 
 @media（min-width：992px）{＃myImage {background-image：url（http://placehold.it/1200x150）;}} 
 @media（min-width：1200px ）{#myImage {background-image：url（http://placehold.it/2000x150）;}} 
  

jsFiddle演示

用Javascript替换图像

由于使用背景图片的限制，您可能决定使用真正的 img 元素然后只是动态加载图像。您可以执行类似于使用 <$ c的角度所做的操作，而不是加载元素本身。 $ c> ng-src 评估解析为url的表达式时。当浏览器加载每个元素时，它将无法找到 src ={{personImageUrl}}的文件位置。相反，Angular将预期的URL保存为数据属性，然后在适当的时候加载。

首先，拍摄每个图像并在前面加上 src 带数据的属性 - 。现在浏览器不会自动开始实现任何内容，但我们仍然可以使用这些信息。

 < img class =" visible-xs img-responsive"  DATA- 的SRC =" HTTP：//placehold.it/768x150" /> 
  

然后查询我们最终想要加载的所有动态图像。

  $ dynamicImages = $（[data-src]）; 
  

接下来，我们将要捕获窗口调整大小事件，并在第一页加载，我们将触发一个，这样我们就可以使用相同的代码。使用这样的函数：

  $（window）.resize（function（）{
 // Code Goes Here 
}）。resize（）; 
  

然后检查每个动态图像是否可见。如果是这样，请从data属性加载图像并将其从数组中删除，这样我们就不必继续检查并加载它。

  $ dynamicImages.each（function（index）{
 if（$（this）.css（'display'）！=='none'）{
 this.src = $（this） .data（'src'）; 
 $ dynamicImages.splice（index，1）
} 
}）; 
  

jsFiddle中的演示

I'm running Twitter Bootstrap 3.2.

My page has a banner image for every breakpoint. That means code like this:

<img class="visible-xs img-responsive" src="headline-768px.jpg">   (128kb)
<img class="visible-sm img-responsive" src="headline-992px.jpg">   (144kb)
<img class="visible-md img-responsive" src="headline-1200px.jpg">  (264kb)
<img class="visible-lg img-responsive" src="headline-2000px.jpg">  (380kb)

The main purpose of having 4 different images is so that mobile devices don't need to download the larger versions. But Bootstrap preloads all the versions regardless of screen size, even if they're hidden at the current breakpoint. This amounts to hundreds of unnecessary kb for every viewer.

Is there a way around this?

解决方案

Demo of the Problem:

Not all browsers react the same, but typically browser's will load content from a src attribute, regardless of whether some other CSS rule renders that element as invisible.

Here's a baseline example:

<img class="visible-xs img-responsive" src="http://placehold.it/768x150" />
<img class="visible-sm img-responsive" src="http://placehold.it/992x150" />
<img class="visible-md img-responsive" src="http://placehold.it/1200x150"/>
<img class="visible-lg img-responsive" src="http://placehold.it/2000x150"/>

Demo in jsFiddle

Whenever I refresh the page, the browser loads all images, even ones that are initially invisible:

Background Image + Media Queries

This tutorial on Simple Responsive Images With CSS Background Images goes into more depth, but the basic solution works like this:

Create a simple div:

<div class="responsiveBackgroundImage" id="myImage" ></div>

And then sub in the correct background image depending on the screen size:

We'll probably want all the background images to share a couple basic properties like this:

.responsiveBackgroundImage { 
    width:100%;
    background-size: 100%;
    background-position: 50% 0%;
    background-repeat: no-repeat;
}   

Then replace the background-image property for this particular element at each resolution:

#myImage {background-image: url(http://placehold.it/768x150); }
@media (min-width: 768px)  { #myImage { background-image: url(http://placehold.it/992x150); }}
@media (min-width: 992px)  { #myImage { background-image: url(http://placehold.it/1200x150);}}
@media (min-width: 1200px) { #myImage { background-image: url(http://placehold.it/2000x150);}}

Demo in jsFiddle

Replacing Images with Javascript

Due to limitations with using background images, you might decide to use a real img element and then just dynamically load the images. Rather than loading the element itself, you can do something similar to what angular does with ng-src when evaluating an expression that resolves to a url. When the browser loads each element, it wouldn't be able to find the file location of src="{{personImageUrl}}". Instead, Angular saves the intended url as a data attribute and then loads when appropriate.

First, take each of your images and prefix the src attribute with data-. Now the browser won't automatically start implementing anything, but we still have the information to work with.

<img class="visible-xs img-responsive" data-src="http://placehold.it/768x150"/>

Then query for all the dynamic images we'll eventually want to load.

$dynamicImages = $("[data-src]");

Next, we're going to want to capture window resize events, and on the very first page load, we'll trigger one just so we can make use of the same code. Use a function like this:

$(window).resize(function() {
    // Code Goes Here
}).resize();

Then check if each dynamic image is visible. If so, load the image from the data attribute and remove it from the array so we don't have to keep checking and loading it.

$dynamicImages.each(function(index) {
    if ($(this).css('display') !== 'none') {
        this.src = $(this).data('src');
        $dynamicImages.splice(index, 1)
    }
});

Demo in jsFiddle

这篇关于防止Bootstrap预加载所有hidden- *图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！