We Keep Coding

Reload specific div

I want to display a sequence of images on a webpage.
The website is static with no server side language.
Is there a way to have the website load kind of like this img1, img2, img3 and so on after a click while not reloading the entire page.
I am pretty new to html and css but willing to do some reading about JavaScript if necessary.
The point is to have the site load as little as possible.So any other tips would be greatly appreciated.
Bonus if there are any other website optimizations I am not thinking of.

Although you have an accepted answer but here's what you were looking for exactly REPLACING THE DIV ON CLICK
HTML
<input type="button" id="btn1" value="ClickMe">
<div id="dv1">
<img id="img1" src="">
</div>
jQuery
$( document ).ready(function() {
var check=0;
$('#btn1').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$("#img1").attr('src', 'url1');
check++;
} else {
if(check==0){
$("#img1").attr('src', 'url2');
}else{ $("#img1").attr('src', 'url3');}
}
$(this).data("clicks", !clicks);
});
});
Working DEMO

You can create image tags in your HTML with an empty src attribute:
<img src="" id="image-1">
<img src="" id="image-2">
<img src="" id="image-3">
Load image 1
Load image 2
Load image 3
Then, via JavaScript, you can listen for a click event on each link, and populate the src of each image:
document.getElementById('but-1').on("click", function(){
document.getElementById("image-1").src="path/to/image.jpg";
})
document.getElementById('but-2').on("click", function(){
document.getElementById("image-2").src="path/to/second-image.jpg";
})
//... and so on
That way, each time a link is clicked, each respective image will load.

javascript - swap url for download link

i have a simple html site where at the top is a main image with a download button.
The download works with the html5 download attribute.
Now i have some thumbnails underneath the main image - which when clicked replace the main image with the thumbnail image.
Following issue: I use the same javascript code to also replace the url of the download button with the thumbnails url, but when clicking the download button it still opens the hardcoded download link from the html instead of using the replaced url.
HTML
<div class="dwnldcntnr">
<img src="imgage1.jpg" alt="Image Title 1" />
</div>
<div id="btncntnr">
<a href="imgage/image1.jpg" download="image1.jpg">
<button id="btn">Download</button></a>
</div>
<div class="itemcntnr">
<a href="image2.jpg" title="2.jpg">
<img src="image2.jpg" />
</a></div>
JS code for replacing download url with thumbnail url
<script type="text/javascript">
$(document).ready(function() {
$('.itemcntnr a').click(function() {
var path = $(this).attr('href');
$('#btncntnr a').attr('href', path)
.attr('download', $('a', this).attr('title'));
return false;
});
});
</script>

Don't put hard coded href for the link in html instead try to add it on $(document).ready
Also I agree with ahren that you should never put button inside an a tag. Instead apply styles to a tag so that it will look like a button

Try replacing the whole DOM element.
I don't think you should be nesting a button inside an a tag, as they're both elements that have native interactivity. You'll most likely come across HTML parsing errors in earlier versions of IE.
$('.itemcntnr a').click(function() {
var $this = $this.clone().empty().html('Download');
$('#btncntnr a').replaceWith($this);
return false;
});

Is there any way to halt page load until an image is loaded(preloader)

I have an image that I am using in a preloader. I want this image to be loaded before the other contents are loaded
<div class="overlay" id="mainoverlay">
<div class="preloader" id="preloader">
<img src="images/logo128.png" id="logo-preload"/>
</div>
</div>
I want this image to be loaded before the rest of the content. In a way I want this image to load the way the browser would load a js file: block page rendering until the script is loaded. Is there any way of doing this

Consider David's imagesLoaded script, which has its use cases listed in its README.
Based on that assumption, I think you are looking for something similar to this:
$('#preloader').hide();
var imgLoad = imagesLoaded('#preloader');
imgLoad.on( 'always', function() {
$('#preloader').show();
});

How to display main image when clicked on its thumbnail using jQuery

My DOM looks like this...
<div id="leftPan">
<div id="leftmemberPan">
<img src="/MyApp/images/${article.images[0].imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testingMain"/>
</div>
<div id="thumbnailPan">
<c:forEach items="${article.images}" var="image">
<img src="/MyApp/images/${image.imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testing"/>
</c:forEach>
</div>
</div>
leftmemberPan is showing the main image and thumbnailPan is showing list of thumbnails
<c:forEach items="${article.images}" var="image"> is just a JSTL tag which holds array of thumbnail images.
Please note that I am new to jQuery and using it for the fist time.

You can save a list of the main image src's within the alt tags of the thumbnails and then modify your leftmemberPan src to show the primary image.
Ex:
<img id="leftmemberPan" src="myplace_holder.jpg" />
<img class="thumbnail myimg.jpg" src="myimg_thumbnail.jpg" />
<script type="text/javascript">
$(".thumbnail").click(function()
{
var class_array = $(this).attr("class").split(' ');
var newsrc = class_array[class_array.length-1]; // Pull new src from the class tag (assuming it's the last one)
$("#leftmemberPan").attr('src', newsrc);
});
</script>
Keep in mind this is just one way to do it. You can store the primary image in many other ways as well.
Hope this helps!
EDIT: Updated the code example to utilize the class attribute

I would put the path of your image into the data-path tag of each thumbnail, then when you click the thumb, grab that path from data-path and make the src of the main image that path.
Cheers!

Revising previous posts / answers (using jQuery 1.7) ...
<img class="thumbnail" data-file="myimg.jpg" src="myimg_thumbnail.jpg" />
<script type="text/javascript">
var mainImage = $("img","#leftmemberPan")[0];
$("#thumbnailPan").on("click", ".thumbnail", function(event){
mainImage.src = $(this).data("file");
});
</script>
Use a data attribute for the main file image path.
Do one (-time) DOM lookup after page load to reference the main image
element.
Just set the src attribute of the image element using the data attribute of the thumbnail.

How to show hidden content where the contents images don't load until the content is shown?

What would be a good way to show hidden content with javascript, without having the image elements <img src="myimage.jpg"> of the hidden content load their images in google chrome or any other browsers until the content is actually shown?
hiding the content with the css rule display: none will not prevent the images from loading, and I would like to avoid using ajax calls.

EDIT 1 as discussed in the comments, a better alternative would be to use a template. As an example I picked John Resig’s Microtemplating engine:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = tmpl('content', {});">show div</button>
See fiddle
EDIT 2
As the original poster commented, it's perfectly possible to grab the contents of a <script type="text/html"> element. Templating engine's not necessary:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = document.getElementById('content').innerHTML;">show div</button>
First Answer
(see in edits)

To do what you want within your requirements you could have javascript write the content when you want it displayed. So you would store your HTML in a javascript string and just use script to then insert it into the page when you want it. Its not a very nice way of doing it but it would mean that it would only load images at that point.
Alternatively you could put the HTML in but have the images pointing at nothing (or a blank placeholder, etc.) and then use script to programatically populate the image sources to the correct values when you call the show function to show the page.
Which of these you choose is probably more about readability than anything else though I would favour the second approach (just tweaking the image sources).

First, define a CSS style:
.invisible {
display: none;
}
Add this class to the objects in the HTML. Then anywhere in the JavaScript, simply add or remove the class, or change the display to block or float etc. In jQuery:
http://api.jquery.com/addClass/
http://api.jquery.com/show/
EDIT:
If you don't want the image to load, then use an AJAX call instead.
http://api.jquery.com/jQuery.get/
jQuery.get('myImage.jpg', function(data) {
jQuery('.imageContainer').html(data);
});
EDIT 2:
Load the src into the img once it's needed. You could check the scroll position etc.
http://jsfiddle.net/LYMRV/

Seems like it is possible to hide content using a script tag with type="text/html", it even prevents any images and iframes from loading in the background,
for example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.addEventListener('click',function(e){
if(e.target.id=='content_show'){
e.preventDefault();
document.getElementById('content_visible').innerHTML = document.getElementById('content_hidden').innerHTML;//document.getElementById('content_hidden').text also works
}
});
</script>
</head>
</body>
<img src="image1.jpg"/>
<script type="text/html" id="content_hidden">
<img src="image2.jpg"/>
<img src="image3.jpg"/>
<img src="image4.jpg"/>
</script>
Show Content
<div id="content_visible"></div>
</body>
</html>
Only thing to keep in mind is to avoid placing script tags inside #content_hidden.
Now if anyone is friendly enough to point out every flaw in this method, so that we can all benefit.