Wait for Images to finish loading

[Deadweight]

Like the title says, I am currently working on something that reads images use ajax/php from a certain folder. It grabs all the images and creates a mini gallery. The problem I am having is if they are 10k by 10k it takes forever to load (when resized).

I also use something like this:

$('#imageDiv').css({'background-image':'url(loader.gif)', 'background-repeat':'no-repeat', 'background-position':'center center'})

Which should create the loading GIF. Now when the images are trying to load (massive sized ones) it slows down the page and makes it massively laggy.

I did create something like this tho:

$('#imageDiv').html('<img src="" />')
$('#imageDiv').children('img').hide()
$('#imageDiv').children('img').attr('src',image)
$('#imageDiv').children('img').on('load',function(){
			$(this).fadeIn(200)
			$(this).parent().css({'background-image':'none'})
		})

How can I fix that

[jscheuer1]

It gets complicated. The .hide() function makes display none. The browser doesn't have to load that resource. I think most do now, but some may still not. At one point none did.

You could perhaps load the images sequentially using javascript new Image(). I can get into more detail on that if you need it.

An important thing to be aware of - though most browsers work just fine with:

$('#imageDiv').children('img').attr('src',image)
$('#imageDiv').children('img').on('load',function(){
			$(this).fadeIn(200)
			$(this).parent().css({'background-image':'none'})
		})

This assumes the image is not cached. If it is, it may load before the onload event is assigned. You can always do:

$('#imageDiv').children('img').on('load',function(){
			$(this).fadeIn(200)
			$(this).parent().css({'background-image':'none'})
		}).attr('src',image);

Which makes sure the load event is assigned before the image even begins loading.

Now, there's nothing you can do to speed up the loading of images. They will take however long that they will take. The one exception is holding back some images while others load. A popular script at one time called lazy load or something like that prevented images that were not seen (images below the bottom of the browser window) from loading until the page was scrolled to where they were located. I think that's still available, you can Google it. The advantage there is that the images that are in the viewable area of the page load faster because they don't have to compete with the unseen "below the fold" images.

Browsers vary though, so anything simple that might work in one, might not in others.

The conventional way of dealing with the situation you describe is to display only smaller thumbnail images until - well that's up to you. It could be until hover, but with mobiles, that's ambiguous, so click is popular, like with Lightbox type scripts.

BTW - Resizing images has no effect on their load time unless you are actually changing their byte size on the server side. If that's what's taking so long, you would be far better off with thumbnails prepared ahead of time. Also how is an image 10K by 10K? K is usually a measure of bytes not pixels. What do you really mean by that? 100k? Something else?

[Deadweight]

Thanks again. I think my issue is how I am trying to make it appear. The sizes of the files are massive but I uploaded it to a server so you can see what I am talking about:
http://thebcelements.com/dhtml/main/...lery%20Remake/

Also I did mean 3k x 2k pixels and about 4MBs

[Beverleyh]

Can I just ask, why do your images need to be so big? Could you not display an optimised preview image but then provide the bigger/HD version as a download link? That would help with load speeds (perceived and actual) and in turn help with visitors perception of the site/service (considerate, fast - to help them achieve their goals quicker, less likely to crash browsers, lots of other feel-good about not having to wait while content chugs onto the screen)

[Beverleyh]

Yup - I clicked your link in iPhone and the browser pooped

[Deadweight]

Because I am grabbing the photos with php and if they cannot be edited due to legal reasons.

[Deadweight]

Anyways I did create something that processes the same but I am still getting the loading error (prolly due to the fact that I am still loading them incorrectly).
HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basic Outline</title>

<link rel="stylesheet" href="css/main.css" />

<script src="js/jquery.js"></script>
<script src="js/loader.js"></script>
<script src="js/createdfunctions.js"></script>
<script src="js/functions.js"></script>
<script src="js/eventfunctions.js"></script>

</head>
<body>
<div id="progressBar"><div class="s"></div></div>
<div id="testDiv"></div>
</body>
</html>

CSS:

* { padding:0px; margin:0 auto;}
#progressBar { width:100%; margin-top:2px; border:2px solid black; height:20px; position:relative;}
.s { height:100%; width:0%; position:absolute; left:0px; top:0px; background-color:#000000;}

JQUERY:

$(function(){
	$('#testDiv').createGallery(['grabgallery.php','galleries', false])
})
$.fn.createGallery = function(args){

	var $id = this;
	$.ajax({
		type: 'POST',
		async: false,
		url: args[0],
		data: {location: args[1]},
		dataType: "json",
		success: function(response){
			$id.loadGallery(response, args[1], args[2])
		}//if success
	})	
}

var loaded = 0;
var maxloaded = 0;
var images = Array()
var folder = ""

$.fn.loadGallery = function(imageList, dir, rot){
	var $id = $(this)
	folder = imageList[0];
	images = imageList[1][0];
	
	maxloaded = images.length;
	$.each(images, function(i){
		loadImage(folder+'/'+images[i], 200, 200, $id)
	})

}

function loadImage(img, w, h, id){
	$("<img />").attr('src', img).on('load',function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } else {
			loaded++;
			id.html(loaded)
			if(loaded==maxloaded){
				id.html('')
				$.each(images, function(i){
					$(id).append('<img src="'+folder+'/'+images[i]+'" style="width:200px; height:200px;"></img><br />');
				})
			}
			$('#progressBar').children('.s').animate({'width':parseInt(loaded/maxloaded*100)+'%'},0)
            //$(this).width(w).height(h).appendTo(id);
        }
    });
}

[molendijk]

This may be helpful.

[Deadweight]

For me it doesn't work. Maybe I am doing it wrong but don't i make a new class:

$t = new scratch_utils_imgresize;
$t->resize(info in here);

Because nothing happens