I have a set of images that I wanted to load first before executing the next line of code. The code is like:
$('div.some_class img').load(function() {
// do something to div.some_class img
});
However, the images do not load before executing the commands. When I try (window).load though, it works.
My question is, why doesn't ('div.some_class img').load work? Or is it because I'm using a class selector which is the slowest way to select an element?
from http://api.jquery.com/load-event/
Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load()
shortcut is to execute a function when an image (or collection of
images) have completely loaded. There are several known caveats with
this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to firefor images that already live in the browser's cache
Hope this answers your question.
https://gist.github.com/268257 - this is a jQuery plugin to check for all images loaded
I don't think that load checks for the image to have actually loaded as much as that the tag has loaded? I had the same problem so used the above plugin
Related
I use jQuery (which seems to use a glorified form of innerHTML document writing), to add a piece of HTML to the DOM:
$newElem=$(HTML).appendTo($container);
The said HTML piece contains CSS links, which seem to load async. Images also load async.
I need some form of load event similar to window.load when async content is done fetching AND done parsing (i.e. CSS), because based on that I trigger a container resize/rearrange function, and sizing obviously depends on CSS, async images (and even async fonts but this last point is not an immediate concern for me). So how to get a proper load event for the DOM-added HTML?
I don't think there's a built-in "load" event that's fired when all the resources requested by the dynamically added elements are finished loading.
You can probably implement this though if you're sufficiently motivated.
There's waitForImages jQuery plugin, that goes through the given DOM subtree, looking for images (<img> tags as well as references to images in computed CSS styles). It creates an <img> element for each image referenced from CSS to track its load status (as discussed here).
It doesn't support:
content:url() images (should be easy to add)
Tracking resources referenced from dynamically loaded CSS. You can use a similar approach to find all the <link> elements in the given subtree, and use their load event (supported in all major browsers now) to wait until the CSS is loaded. After CSS finishes loading, run waitForImages to track the image loads.
I found this Javascript to activate my website's pre-loader. However, it seems to disappears once the page has loaded and not when images have finished loading.
After searching I found someone suggesting window.onload which waits until images have loaded, but I can't seem to figure out how to implement it into my existing Javascript.
$(document).ready(function(){
$(".se-pre-con").fadeOut("slow")
If you would like to use the window.onload function to hide your preloader, you can attach to the event in jQuery using the following snippet:
$(window).on('load', function () {
$(".se-pre-con").fadeOut("slow");
}):
Make sure to use the .on() method signature and not the event signature .load(), which was deprecated in jQuery 1.8 and removed in jQuery 3.0.
You should note the following from the .load() docs:
Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
I know I can use
$(".container").ready(function(){
// Run after DOM loaded
});
to run code after the DOM has been fully loaded. This includes images though it seems it doesn't include GIF-images. From what I can see, loading the first frame of the gif counts as "loaded".
Is there a way to trigger code after the fill gif has been loaded?
The <img> element has on onload event - this should do the trick.
If you'd like to use jQuery for that, you can read about it here: https://api.jquery.com/load-event/
Images have a onload event that fires.
$(".image-selector").on("load", function(){
// Run after the image has loaded.
});
If you are targetting an older version of IE (pre IE9) there are sometimes troubles if dynamically changing the src property and you'll also have to check the image.complete property.
Edit: Went looking for the property name and found this question: jQuery callback on image load (even when the image is cached)
You may use the imagesloaded plugin for this use case.
How about this
$(document).ready(function(){
$("gif selector").load(function(){
alert("gift loaded.");
});
});
Example: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_load
I am trying to hide my preloader with JavaScript once the DOM and at least the top content has been loaded. The problem is that my page has several iframes which can slow the process down a lot.
My understanding is that if I use jQuery's $(document).ready to hide the preloader, it will be hidden too soon. On the other hand, if I use $(window).load, the waiting time may be too long. So, is there a middle-way solution, - kind of like window.load but without waiting for iframes?
EDIT:
My page has stuff like Facebook Like button Google Translate and a few other scripts that work via iframes. These are not critical elements, and I would not like to wait for them to load fully.
On the other hand, CSS files like Bootstrap, jQuery, etc. are curcially important for the presentation, and therefore to show the page (hide preloader) w/o having these loaded first would be premature.
Thanks.
You could use $(document).ready to determine if a particular element is loaded before hiding your loader.
Or if you have partial views, to have a $(document).ready function in one of those pages js do the loader hide job.
Since you did not provide more info, these are closer to guesses than real solutions.
I think you're looking for document.onload, which will fire when the DOM tree is ready. I believe that it fires before iframes, which all get their own onload callback/event handler.
You can also try placing the script tag at the end of your html file without begin inside an onload or ready function. This will cause it to load the html content, then fire the Javascript.
EDIT
A thought just occurred to me, which may or may not be useful. You probably have an idea about when you want your script to execute. In whatever browser you are using, check the network tab of the development console. There may be some other element's onload function you want to wrap your code in. For example, if you have a background image you want to make sure loads before your code executes, you may want to use it's onload.
As Petre said, lack of info in the question makes answering difficult.
How can I only load the HTML of a page into an IFRAME, without automatically triggering the download of all the css,scripts,images,videos on the page?
Or can you get an event the moment the DOM is "ready".. when the initial HTML has loaded and nothing much more.
To get only the HTML contents, try using an AJAX call. That would, of course, return the content in a variable, but you might process it as you see fit afterward.
There is no cross-browser way to do this. Some browsers provide events that fire when the DOM loads, like DOMContentLoaded for Gecko.
jQuery implements this functionality. I suggest you either use jQuery for this:
$(document).ready(function () {
// Function is called when the DOM is loaded.
});
Or check how jQuery implements it. See the bindReady function in the jQuery source code.
The short answer is "You can't".
Internet Explorer supports a propriatry attribute which can prevent scripts from executing, but it isn't cross browser and doesn't deal with images or stylesheets.
A number of JS libraries implement a custom event that fires when the DOM is ready - but browsers load resources in parallel, so while that event may fire before all images and stylesheets are loaded, it is unlikely to fire before the other elements start to download.
If you really want the page to load without those things - process it on the server to strip out the HTML that includes them.
Set 'Content-type' for that HTML page to text/plain.