Preload tag IMG without specifying the name of the images

Question

I need a script that loads all images of a web page, and then displays it. I would like the script to preload all TAG and then make a web page visible.

I have alrady tried script like JPreloader or a jQuery plugin, but the I want to write in an array the name of the image.jpg and preload all img tags without specifying the name of the images!

See http://stackoverflow.com/questions/29044852/preloading-images-in-html/ — guest271314, Mar 16 '15 at 23:15
Can include `html` , `js` , `css` at Question ?, create stacksnippets , http://jsfiddle.net ? — guest271314, Mar 16 '15 at 23:31
if your problem is, that your page is jumping around while loading images, you have to specify width and height for your images. Take in mind, that (im not 100% sure), that hiding your 'body' can be bad for SEO. — AppGeer, Mar 16 '15 at 23:33
@RavenJe There are 3 answers under your question, each solving presented problem in some way. That woluld be nice if you gave us some feedback, like some comments or accept vote. — Frax, Mar 19 '15 at 10:52

score 0 · Answer 1 · answered Mar 16 '15 at 23:15

0

The reason for the poor result is that the people don't understand your topic. By the way. It don't make any sense for me, but you can use this:

// CSS
body: opacity: 0;

// jQuery
$(window).load( function() {
   // this will fired, when everything is loaded by the clients browser
   $('body').css('opacity','1')
   // or you can animate it
   $('body').fadeTo(500,1); // 500 for 500ms
} )

answered Mar 16 '15 at 23:15

AppGeer

725
1
11
27

the thing is that i dont want write all the times the name of the images, i want that jquery load all tag img before to show the page! – RavenJe Mar 16 '15 at 23:27

score 0 · Accepted Answer · answered Mar 16 '15 at 23:17

0

In your css

body {display: none;}

In Script Tag

$(window).load(function(){
  $(body).show();
});

answered Mar 16 '15 at 23:17

Andi

113
3

score 0 · Answer 3 · answered Mar 16 '15 at 23:25

If you like to hide only some parts of the page (it would be nice to show at least something to user), you can modify the solution like this:

HTML:

<div class="img-container">
    <img src="...">
</div>

CSS:

body:not(.body-ready) .img-container {
    display: none;
}

JS:

window.addEventListener('load', function(){
   document.body.setAttribute('class', 'body-ready');
});

jsfiddle

Preload tag IMG without specifying the name of the images

3 Answers3