Delay some jQuery function until all images are loaded completely - javascript

How do I delay some jQuery / JavaScript function until all the images on a page have finished loading?
Actually, the jQuery function I'm talking about is for setting the offset position for a div. The problem is that the page resizes once the images are loaded completely, so the offset is wrong.
For the jQuery function refer to this question: Issues with Fixed div on bottom of page that stops at given place

You can use the onload event which runs after all images or external resources are loaded:
$(window).load(function(){
// your code here, all images loaded
});
You can also use the load event for individual images and run your code when they have loaded:
$('img.ImageClass').load(function(){
// The image loaded....
});

just write the function under a variable like
function newfunction(){
//put all the stuff here
}
after that call this function on every image load like
$('img').load(function(){
newfunction()
})
from this the newfunction will call everytime a new image load.

Related

Run JS code when all HTML has loaded (not images)

I want to execute a js code which adds a class to all elements that have specific class eg. .lookbook-block however, I think I'd have to wait until all the HTML has loaded before this loop is executed, but the page had a lot of images so I don't want to use window.load ad that will wait until all images have loaded, which will delay the execution. Is there a way I can wait until only the HTML has loaded?
Thanks!
Put script at the bottom of the html
$(function() {
// Your code here.
});
This adds a callback function to execute when the ready event is triggered from the jQuery library. You can read more about it here. You can do the same thing by using this, which is more clear:
$(document).ready(function() {
// Your code
});

Loading content into a div with jQuery.load(), how can I make new images fade in on load?

I'm trying to achieve the following: I have a div on which I use the load() method to fetch new HTML content.
$('#mydiv').load('/newcontent.html');
This new HTML also contains images, and I would like those images to be faded in once loaded.
First I tried using a callback function with the load() method, but this function is triggered as soon as the HTML is fetched, but before the browser has loaded all the new images.
Then I tried applying an on('load') event on all the newly fetched images, but this does not work at all.
$('#mydiv').load('/newcontent.html', function() {
$('#mydiv img').css('visibility','hidden').on('load', function() { $(this).fadeIn(); });
});
The "visibility: hidden" works fine, so that my new HTML content is loaded into #mydiv, and all images are set to invisible. But the fading in does not work. The event I'm trying to bind here does in fact trigger as soon as the new HTML is loaded (which does not make any sense to me), but not when the individual images are loaded.
How can I solve this? Any help appreciated!
Use fadeIn() and fadeOut() out jQuery. And if you want to do on load then use the event for that.

how to display the image at last after loading all the other contents in a webpage

how to display the image at last after loading all the other contents in a webpage.
I've an image on a page which is retrieved from the database when a button is pressed.
I'd like to load entire page first and the image at last after the contents are loaded.
any help?
If by load you mean download the various parts of the page and construct the DOM, then:
$(document).ready(function() {
$('#theimage').show();
});
You can load and add it to your html it in javascript using this function:
$(window).load(function() {
// in 2 steps for clarity, can be optimized
img_html = '<img src="/path/to/image" alt="bla bla" />'; // step 1, generate image html
$("#image_div").append(image_html); // step 2, append image to some div
// optional, see my comment below
$("#image_div img").load(function() {
// triggers when newly added image is completely loaded
});
});
That makes sure loading of the image starts when everything else has finished loading.
Note that the image in the example shows while loading, if you want to load it first and then display it, you'll have to hide it and use the .load event of the image to display it.
$(document).ready(function() {
$('#imageid').attr( "src", "/new/path/to/image.jpg" );
});
In your initial load of the page you can just write a placeholder (div, span, even an image with nothing assigned to it.)
Then attaching to the button click event you can use JQuery + Ajax to callback (not postback, or is there any reason for the postback OTHER than to get the image?) to your server (or a webservice) to get the image path and assign that to the place holder. You can augment that with various jquery animations to "fade in" your image or slide down... what ever you like.
can you use javascript to dynamically set the image url after the dom loaded?
If you have html structure
<image id="image_id"/>
Then use the following jquery code:
$(document).ready(function() {
$("#image_id").attr("src", "link_to_image");
});
Or else, you can use some css trick, hide the image first, so it won't download from server.
Then use the following jquery code to show the image once DOM is ready:
$(document).ready(function() {
$("#image_id").show();
});
At the same time, looks at image preload. this may be useful to you http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

How can I tell when all images on a page are loaded using jQuery?

I’m using jQuery for my project. $(function(){...}) fires the function “when the DOM is ready” — this doesn’t say that all images are loaded, right?
Is there an event that gets fired when every image is loaded too?
I guess you mean
http://api.jquery.com/ready/
versus
http://api.jquery.com/load-event/
Example: Run a function when the page is fully loaded including graphics.
$(window).load(function () {
// run code
});
without jQuery:
window.onload=function() {
alert(document.images.length);
}
You can check on load event of image tag. This will get fired when image loading completes.
$("img").load(function(){
// your code
});
window.onload will solve this, I wrote about this there: http://amrelgarhy.com/blog/how-to-tell-when-images-have-loaded/

Wait until function is loaded

How can I in jQuery test when a javascript function is fully loaded?
I would like to use a gif, which displays loading, while the javascript function loads, and hide it when the function is fully loaded?
$(function(){
$("#loadingGIF").show();
WaitForFunction();
});
function WaitForFunction()
{
if (!$.isFunction(FUNCTION_TO_WAIT_ON_HERE)) {
setTimeout( WaitForFunction, 100);
return;
}
Function_Loaded();
}
function Function_Loaded(){
$("#loadingGIF").hide();
}
Just call yourself after defining the function. The statements after the function definition will only be executed after the preceding source text is read (and thus executed).
I'm not sure what you mean by loading but the following should apply anyway:
When you start loading the JavaScript code, display the GIF
In the code you load, add a statement to hide the GIF at the end
This should solve your problem in a "simple" way without having to use timers, etc.

Categories