I have a simple HTML page with a little JavaScript in it. The JavaScript launches onLoad in the body. The body also has a background image. The JavaScript launches before the background image is loaded. Is there a way to have the body onLoad wait for the body background image to load?
<body background="http://xxx.com/xxx.jpeg" id="myBody" onload="pageLoaded()">
If you want to make sure a script launches after all the images have been loaded, then use
$(window).load(function() {
//.......................
});
This event, will only fire once all the scripts, css, js, images have been load, unlike $(document).ready();
You can try with
jQuery(window).load(function() {
//your code here
});
jQuery(document).ready(function() {
//your code here
});
But i don't think whether it will consider background image loading. A more efficient way will be to use this jQuery plugin:
https://github.com/alexanderdickson/waitForImages
You can make the jQuery function call like :
jQuery('body').waitForImages(function() {
//your code here
});
Hope this helps you :)
did you try with JQuery? http://api.jquery.com/ready/
<script>
$(document).ready(pageLoaded)
</script>
Or listen for DOM ready without jQuery
Related
On one of my previous pages I use
<script src="/js/wireEvent.js"></script>
<body onload="wireEvent();" >
Basically, wireEvent() displays an image on top of the page whenever the mouse goes out of the browser.
However, now I cannot add this function directly to the body of my page, so what is the proper way to add it? Will it be right if I add
<script>
window.onload = wireEvent;
</script>
or I enclose the whole function in
$( document ).ready
and only include the function's file to my html?
The code below executes only after all your images load completely. So you can try this:
$(document).on('load', function(){
wireEvent();
});
You can just do:
$(function(){
//jQuery code here
});
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
});
I have a div with text in it and a background image. When I load the page the text always appear 1st(assume i have low speed internet connection). How can i make the background image load before text? Can You please give me solution in both jquery and javascript
Add the text in the onload event handler for the image.
Note: If you want to keep using a div tag with a background image rather than an img tag, you'll have to add the text during the window.onload event (see this answer for the details).
Assuming your div looks like this:
<div id="Derp" style="CSS-for-background-image-here">Magical ponies!</div>
I would try removing the text completely and then add this kind of jquery call:
<script>
$(document).ready(function() {
$('#Derp').load(function() {
$('#Derp').text("Magical ponies!");
});
});
</script>
The $('#Derp').load(...) is the key here. See the docs for load(). It has an example of exactly what you need.
you could populate the content onload.
Start with this:
<div id="content"></div>
Then, in jquery, do this:
$(document).ready(function() {
mybg= new Image();
mybg.onload=function(){
$('#content').html('YOURTEXTHERE');
}
mybg.src = "PATH/TO/IMG";
});
your simple answer is .load you can do when your window gets loaded fully and then text appears:
$(function(){
$(window).load(function() {
$('p').fadeIn(800);
});
});
what this is doing is fading in the p tag with text when whole window gets loaded.
you can find a demo here: http://jsfiddle.net/a5P8b/
I'm trying out jQuery for the first time, and I'm not sure how to make it work properly. I've included the following code near my opening <head> tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
Followed by the following jQuery code:
<script>
$('.darkmask > img').hover(function(){
$(this).parent().toggleClass('darkmask-hover');
})
</script>
Unfortunately, this code doesn't work when I try it in a browser, or in JSFiddle. However, when I set JSFiddle's framework to load jQuery itself, rather than loading jQuery through my own code, the animation works properly.
Am I loading jQuery wrong? If so, what's the right way?
PRoblem is, your code in JSFiddle is executed on the loading on the page. In your code instead, the execution happens when the HTML elements are not yet loaded because it's in the HEAD, so the selectors like .darkmask actually refer to... nothing.
The solution is to use:
$(document).ready(
function()
{
... your code here
}
To ensure that it is executed when the page is loaded and ready, all the HTML elements are there and therefore JQuery selectors can operate on something.
Are there any HTML elements when the code is executed?
Try:
$(function () { // this function executes when the page loads
alert(x);
// put your code here
});
Wrap your entire code in the following:
$(document).ready(function() {
//ALL CODE GOES HERE
});
Wrap your code in:
$(function() {
.... Your code here ...
});
It will mean your code is executed after the DOM tree is loaded.
You do need to wrap your jQuery code within the ready function, like this:
$(document).ready(function(){
// put your code here.
});
Also make sure your script tags have type="text/javascript" as an attribute otherwise it won't get run as javascript.
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/