i use idtabs js for make tab in main page .
http://www.sunsean.com/idTabs/
i put each tab 12 images . when page load first load tab div and header and menu images not load first . so 4min waiting to page load complete .
i want in load page first main images load then defult tab load images and when i select other tabs image on tab loaded ???
<div id="tabs" dir="rtl">
<ul class="tabNavigation">
<li><a href="#topdownload" style="font:12px tahoma;">top</a></li>
<li><a href="#featured" style="font:12px tahoma">more</a></li>
<li><a href="#toprated" style="font:12px tahoma">defult</a></li>
<li><a href="#latest" style="font:12px tahoma;" >free</a></li>
</ul>
</div>
Seems like the plugin you are using is very basic, and doesn't allow ajax requests.
One solution is to use the load method for externals html files (featured.htm, toprated.html...), but I'm sure there is a better way using ajax request to the server and a preload plugin.
<html>
<head>
...
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
</head>
<body>
...
<!-- tabs -->
<ul class="css-tabs">
<li><a href="topdownload.htm">top</a></li>
<li><a href="featured.htm">more</a></li>
<li><a class="selected" href="toprated.htm">default</a></li>
<li><a href="latest.htm">free</a></li>
</ul>
<!-- single pane. it is always visible -->
<div class="css-panes">
<div style="display:block">
<!-- loaded content here -->
</div>
</div>
Now we use ajax to load external pages using load method getting the href of the link element:
<script>
$(function() {
$("ul.css-tabs").tabs("div.css-panes > div", {
effect: 'fade',
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
// only load once. remove the if ( ... ){ } clause if
// you want the page to be loaded every time
if (pane.is(":empty")) {
// load it with a page specified in the tab's href
// attribute
pane.load(this.getTabs().eq(i).attr("href"));
}
}
});
});
</script>
You can achieve this by dynamically assign an image to the src property of the img tag you want to download on demand:
tabs = document.querySelector('#tabs a');
tabs[0].onclick = function(){anyImgTag.src = "images/someimage.jpeg"};