Bootstrap 3 - Dynamic Load Images

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<img class="visible-xs img-responsive" data-src="http://placehold.it/768x150"/>
<img class="visible-sm img-responsive" data-src="http://placehold.it/992x150"/>
<img class="visible-md img-responsive" data-src="http://placehold.it/1200x150"/>
<img class="visible-lg img-responsive" data-src="http://placehold.it/2000x150"/>






















<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
    About this SO Question:
    <a href='http://stackoverflow.com/q/25792575/1366033'>
        Prevent Bootstrap from preloading all the hidden-* images
    </a><br/>
    Fork This Skeleton Here: 
    <a href='http://jsfiddle.net/KyleMit/kcpma/'>
        Bootstrap 3 Skeleton
    </a><br/>
</div>

JavaScript

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

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