Bootstrap: Loading images only if current tab is active

[asamofal]

Hello. I have something like that http://jsfiddle.net/94y3J/31/
How you can see, there 3 tabs: Tab1 and Tab2 has only text content, Tab3 has about 20 images (weight of each images ~100kb ).
Weight of all index.html - Tab3.
I want give this images to user, only if he is on the 3rd tab (Tab3 active). How i can do this?

_Sorry for my bad english.._

[quasipickle]

The jquery Lazy Load plugin is probably what you want: http://www.appelsiini.net/projects/lazyload

[mdo]

This is outside the scope of our help here.

[asamofal]

@quasipickle, thanks! It's really what i want. But i have some trouble with this plugin..
http://jsfiddle.net/94y3J/32 if open Tab3 - images are not displayed until you scroll page in any direction..
I think it's because i'am using bootstrab-tab.. or not? Please help me, guys, what i'am missing?

[quasipickle]

Probably best to use a forum that is meant for questions about the plugin, like StackOverflow, rather than this - an unrelated library's bug tracker.

[marcus-at-localhost]

In case someone need this, you can do it this way:
http://jsfiddle.net/94y3J/37/

$('a[data-toggle="tab"]').on('show', function (e) {
        $(e.target.hash).find('.lazy').each(function(){
        var imageSrc = $(this).attr("data-original");
        $(this).attr("src", imageSrc).removeAttr("data-original");
     });
});

[Codeshark-NET]

I actually used Marcus' above solution for a while - as it works just fine.
Although, you can fix this using LazyLoad the way it's intended, by doing something like this:

$('a[data-toggle="tab"]').on('shown', function () {
    $(window).trigger('scroll');
});

I've also used above while showing hidden content and so forth. Simply trigger the scroll event, and LazyLoad will update what needs to be updated. Saving you a lot of requests compared to the one above.(depending on your content of course)
Make sure to change "show" to "shown" as well.

[hahakubile]

As for bootstrap 3, you can do this way. Change shown to shown.bs.tab. You can see it here:http://getbootstrap.com/javascript/#tabs

$('a[data-toggle="tab"]').on('shown.bs.tab', function () {
     $(window).trigger('scroll');
});