Geek Answers Handbook

How can I hide the contents of a page until all the images are fully loaded?

I am trying to optimize a site that loads horribly. I have already reordered, compressed and minimized js and css, but the biggest problem is the images. There are really heavy images on this site, so when it starts to download content downloads, all the images are uploaded.

I cannot manually set the height of sections containing images because they are user-submitted, and although the width is a fixed value, the height is not.

I understand that this is probably not a very good practice, but I think it’s better if the page two seconds before the show contains that it is inactive and unsuitable for these two seconds.

1.) Is it technically possible? How? (I would like to know this, even if this is not a good practice)

2.) If this is not a good practice, how would you avoid this problem?

+4
source share
5 answers

It is very easy with jQuery . I would recommend using this structure anyway, even if it wasn’t for this particular solution:

function preload(arrayOfImages) { $(arrayOfImages).each(function(){ $('<img/>')[0].src = this; }); }

Use it as follows:

 preload([ 'img/apple.jpg', 'img/banana.jpg', 'img/pear.jpg' ]);

Hiding your site at this point is easy with CSS and jQuery:

CSS

 body { display:none; }

JQuery:

 $(function(){ $('body').show(); // or fade it in: $('body').fadeIn(); });
+1
source

Immediately after the Body tag, add a Div element to cover the entire length and width of the page, make it a white background or add a “Download” image, set its z-index to Max (9999 or something else) so that it’s on top of everything, and give give him some ID / Name

and use Javascript with the Body onLoad event to hide or remove this Div element.

Sort of

 <body onload='document.body.removeChild(document.getElementById("bigDiv"));'> <div style="width:100%;height:100%;background:white;" id=bigDiv>Loading...</div>
+1
source

The first thing to check is to make sure the images are cached. Sometimes image caching is disabled. A way to check this is to directly call the web server:

  telnet localhost 8080 GET /images/flibble.gif HTTP/1.0

And look what is coming back. It should return something like Expires: or Cache-Control.

This page seems to describe this well: http://www.web-caching.com/mnot_tutorial/how.html

Another trick is to specify the size of the images in the tag. This greatly improves performance because the browser does not need to wait for the page to load.

+1
source

I wrote my own js image preloader before, what I'm going to post is pseudo-like to him, but it will need some work. In principle, to make your page load beautifully, the answer is not to hide the body in order to stop it, but rather to decorate what happens when the images load. Besides throwing your baby with bath water, sites usually load faster if they see something happening while they wait.

So what you need to do (for each image, or at least for each large or large image), the loading gif is displayed (check http://ajaxload.info ) while the image is loading, and then when it's finished, you can use jQuery to animate a container with the correct height and image attenuation. This stops your page jumping around (or rather makes it more beautiful while it jumps).

To achieve this effect, something like this should do the trick:

 function imageLoader(elem) { //set all images in this elem to opacity 0 elem.children('img').css('opacity', '0'); var image = new Image(); //show loading image elem.append('html for loading image'); //when the image loads, animate the height of the elem and fade in image image.onload=function() { var h = image.height; elem.animate({height:h+'px'}, function(){ elem.children('img').fadeIn(); elem.children('html for loading image').remove(); }); }; image.src=elem.children('img').attr('src'); }

Use it as follows:

 imageLoader($('someElementWithAnImageTagInside'));

Again this is just psuedocode, but hopefully you should give you some ideas.

Hope this helps

+1
source

U can use a block plugin to block the page. Link

0
source

More articles:


All Articles