Search jQuery

jQuery Forum

Using jQuery

apietr

jQuery .load() function wait for images and js

in Using jQuery • 10 years ago

My index.php content is: "HELLO WORLD"

My myfile.php content is bigimage.jpg (10mb size and will load for 20 seconds).

On index page i fire $('body').load('myfile.php'); and I want it to wait till image is loaded (dont change HELLO WORLD text).

And when image is loaded, then instantly replace old body 'HELLO WORLD' with image that is loaded at the moment.

something like: $('body').load('myfile.php',[change DOM when myfile.php is fully loaded]);

Replies(6)

Godsbest

Re: jQuery .load() function wait for images and js

10 years ago

Please read up on jQuery(window).load()

apietr

Re: Re: jQuery .load() function wait for images and js

10 years ago

How window load 'protect' our HELLOWORLD text from being replaced by unloaded image? It even make it worse. It will load all the stuff anyway and will make all the js wait till stuff is ready. So user will see it before any js on new page will be done.

Again.

Hello world ->>>> $('body').load('something.php') ->>>> dont touch Hello World ->>>> load image, load image ......... -->>>> when loaded replace old body with new.

Godsbest

Re: jQuery .load() function wait for images and js

10 years ago

It depends on how you used it. When your write as in the following:

$(window).load(function() {

$('#helloworld').html('Now the page is fully loaded including graphics.');

});

This would work great if you did not have to load the image via an ajax call. You would just need the following markup in your index file:

<div id="helloworld">HELLO WORLD</div>

Now that you are loading the image via ajax you'll have to use the following form of .load():

$(selector).load('myfile.php',function() {

$('#helloworld').html('Now my image is loaded.');

});

Make selector a hidden element and once the image loads make it visible or copy the image and assign it to body. You cannot load an ajax call to body without affecting what's on the page. You are replacing everything on the page with the image --- remember?

apietr

Re: Re: jQuery .load() function wait for images and js

10 years ago

I DO want replace everything, but I want begin replacing WHEN IT IS 100% loaded, not before. If image is 1GB big, user would see 'hello world' text for some long time waitigng and body should replace when image is downloaded.

But jQuery atm would replace Hello World instantly and user would see how image is slowly loading and I dont want it.

Godsbest