Prevent Download by Preloading All Hidden Images

Question

I am running Twitter Bootstrap 3.2.

My page has a banner image for each breakpoint. This means that the code is as follows:

<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 goal is to have 4 different images, so mobile devices do not need to download larger versions. But Bootstrap preloads all versions regardless of screen size, even if they are hidden at the current breakpoint. This amounts to hundreds of unnecessary kb for each viewer.

Is there any way around this?

Answer 1

Demonstration of the problem:

, src, , CSS .

:

<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"/>

jsFiddle

, , , :

+ -

CSS Background Images , :

div:

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

sub :

, , , :

.responsiveBackgroundImage { 
    width:100%;
    background-size: 100%;
    background-position: 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, . , , - , angular ng-src , URL-. , src="{{personImageUrl}}". angular URL , , .

src data-. -, .

<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

Answer 2

, . ( <img>) .

css, -, css

( <picture> )

Answer 3

jQuery .

HTML:

<div id="billboard">
    <a href="#"></a>
</div>

JavaScript:

$(document).ready(function(){
        var viewportWidth = $(window).width();
        var adaptiveBillboard = function($showTheRightSizeBilboard){
            if(viewportWidth<641){  
                $('#billboard a').html('<img class="img-responsive" src="http//i.imgur.com/ISYNyCw.png">');
            }else if(viewportWidth<721){
                $('#billboard a').html('<img class="img-responsive" src="http//i.imgur.com/OQeEwOq.png">');
            }else if(viewportWidth<769){
                $('#billboard a').html('<img class="img-responsive" src="http//i.imgur.com/3WqOdgo.png">');
            }else if(viewportWidth<993){
                $('#billboard a').html('<img class="img-responsive" src="http//i.imgur.com/KpNKYLq.png">');
            }else if(viewportWidth<1201){
                $('#billboard a').html('<img class="img-responsive" src="http//i.imgur.com/F00kkbv.png">');
            }else{
                $('#billboard a').html('<img class="img-responsive" src="http//i.imgur.com/FK5ZMoo.png">');
            };
        };
        //try things once on pageload
        $(adaptiveBillboard);
        //try things again on every viewport resize
        $(window).resize(function(){
            viewportWidth = $(window).width();  
            setTimeout(adaptiveBillboard,100);
        });
    });

Answer 4

( bootstrap hidden-xs):

$dynamicLoadImages = $("img.hidden-xs[data-src]");

$(window).resize(function(index) {
    for (var i = 0; i < $dynamicLoadImages.length; i++) {
        el = $dynamicLoadImages[i];
        if ($(el).css('display') !== 'none') {
            el.src = $(el).data('src');
            $dynamicLoadImages.splice(i, 1);
            i--;
        }
    };
}).resize();

- splice, .