Fire onload event after loading the first image - javascript

I've a "screenshot" of a website, which we assume is already in the browser cache.
I want the image to be the first thing that's being loaded when the URL of that website is opened in a browser. Think of it as sort of a preloader.
The onload event should fire immediately after that. (= basically instantly)
This is just for the cosmetic reason to stop the browser showing the loading animation to the user.
After that, the rest of the page should be loaded. Once finished, the image should be removed.
So in that order:
Show preloaded image
Make the browser think the page is fully loaded
load the actual website
hide the preloader image
Is there any way, clean or dirty to do that?

Something like this using the the "on load" event on the image.
<div>
<img src="yourpreloadimage.gif" id="img" />
</div>
<script>
$("#img").on('load', function() {
$("#img").hide();
alert("image is loaded. Hide image and show rest of page.");
});
</script>

Related

iFrame .load event not waiting for preloading images to finish

I have built a portfolio site which contains an iFrame to display artworks. To display each artwork an html page containing a large image is loaded into the iFrame.
The iFrame is hidden whilst empty (display:none) and is supposed to fade up only when the content is fully loaded.
//pass url of artwork page to iFrame
$("#creativeiframe").attr('src', thisLink.attr('href'));
//fade up iFrame once content loaded
$('#creativeiframe').load(function() {
$('#creativeiframe').fadeIn(300);
});
I had this working as expected - the iFrame would only load up when the content including the large image that had loaded completely, but slow loading prompted me to try preloading the artwork images so they would start downloading before the user clicked to load them into the iFrame.
function preloadImage(url)
{
var img=new Image();
img.src=url;
}
Now I have a problem - sometimes when a user clicks to load an artwork the iFrame will fade up showing a half-loaded image, or worse just showing the html content without the image loaded. I have looked at Chrome Dev Tools Network inspector and this appears to occur when the image in question has started preloading, but not finished.
So my questions are:
Does anyone know why this is happening? Is it because with the preloading there is no network request for the image when the iFrame src is changed, so the .load event doesn't wait for the image to load?
Is there a way I can get the iFrame .load event to wait for the 'half preloaded' image to finish loading before firing?
I got this to work in the end by running a script in the child HTML document to detect the image load. This then triggers a 'fade function' in the parent document which fades up the containing iFrame.
<script type='text/javascript'>
var img = new Image();
img.onload = function(){
window.parent.fadeFn();
}
<?php echo"img.src='".$fileNameVar."'"?>
</script>
There is also a .load() function in the img tag, which can be used to show whether the image is fully loaded or not.
So I think you can use the .load() function to enable/disable the iframe click.
Or show an waiting indicator, maybe better.
EDIT: this is incorrect, I was confused The load event is fired when the DOM is fully loaded, but that doesn't include external images.
You should be able to do what you want with the ready() event:
//no reason to run the jQuery selector multiple times
var creativeIframe = $("#creativeiframe");
//fade up iFrame once content loaded
creativeIframe.ready(function() {
creativeIframe.fadeIn(300);
});

html, make page appear ready (no tab spinning wheel) while just waiting for images

I have a page that loads images from various sources. Occasionally these images fail to load; perhaps the link has gone dead or whatever. That's fine.
What bothers me is that the browser might take 6 seconds or even longer (I've seen 20 seconds) before it decides that the image has failed to load. During this time the spinning loading wheel in the Chrome tab keeps going and going, making it seem like my page isn't ready.
I've switched my javascript loading from onload to $(document).ready() so at least my page isn't inactive while it waits for the images to load. But it might appear as though it is.
But is there some way to make my page appear "ready" (no spinning wheel) when all it's doing is waiting for the image? Maybe another way to load images? I currently use the img element with src. Or a way to make it give up sooner? Does it really need 6 seconds to decide that an image link is dead?
Not sure if this has a solution. It's a problem that I have seen on a lot of websites, not just mine, but it drives me nuts. I'll often click the stop-loading-x just to make it stop! I'd at least like for my own website to not be like that.
According to my tests, the loading indicator in Chrome does not show for image elements where the loading was triggered by Javascript. Thus, if you don't mind the images not loading with javascript disabled, you could send the img with the src unset, and set it when the page loads. You can store the URL in data-src. The upside is then that you can control when the image loads, if you want to (though you may want to use a plugin for that, like Roullie's answer suggests).
<img width=100 height=100 class="async-img" data-src="http://www.example.com/some.png">
...
$(document).ready(function(){
$(".async-img").each(function(){
this.src = $(this).data("src");
})
})
maybe it can help. lazyload.js

Detect when a particular element in an iframe is loaded

Is there a way for me to detect when a particular element within an iframe is loaded without waiting for the full iframe content to load?
The problem I have is that the iframe is filled with many SVG buttons that take a long time to load and process and hooking into the load event of the iframe forces the action I want to take to wait for them to load fully. I want to access one element out of the iframe and wanted to know if it was possible to detect that that element has been loaded without waiting for the full contents of the iframe to load.
JavaScript or jQuery solutions are both file with me.
$('iframe').onload = function() {
alert("loaded")
})
This will fire when the HTML is loaded, but before it has been fully parsed and rendered.
Beyond that you'd have to poll to see of the element you're looking for is in the page.
You can use it :
$("iframe").contents().find("your iframe elem").load(function(){
alert('element loaded.');
});

universal loading animation for location.href changes

A customer's site we show in an iFrame is extremely slow (~7s).
We can only provide a JavaScript file the customer will include, but he won't do more than that.
Is it possible for me to hook to all events (forms submitted, links clicked) and display a nice loading animation until the page is fully loaded?
Or can I universally ajax-ify his site?
Once your page is unloaded and the other page starts loading, the code from the original page is no longer available or running so it can't be doing anything and the content from the original page has been cleared so it can't be showing anything.
In that same situation, the next page is in the process of being loaded and it's code is not yet running.
Thus, you cannot use normal page javascript to run something throughout the loading of a new page. To do something like this, you would either have to use frames with progress showing in one frame while content loading in another frame or perhaps use a browser plug-in.
You can know when a page is being unloaded with the beforeunload event, but as soon as the next page starts to load, any code assigned to this will no longer be running and the current document will have been cleared.

display an image while a page is loading in an iframe

I have a website with a menu, when menu item is clicked I display the page for that menu in an iframe(iframe is set to display home page initially by default). sometimes it could take few seconds to display the page for the selected menu item (for example reports) and I would like to display a loading image while the page is loading. how to do this using javascript or jQuery (sample code will be helpful)? thanks in advance.
Add the loading image to the iframe innerHTML ( or to a div and stop using iframe ) , then use ajax to fetch the new page content , on success iframe innerHTML becomes the content fetched by ajax witch overwrites the loading image . easy to setup but i recomend you stop using iframes
Usually you cannot know when the page finished loading in an iframe. The iframe loading is independent. What you can do is to get the content of the page that you have in the iframe through a ajax get request, and in this way do an animation while you wait for the content.
write a function to show the image and call it when you set the iframe src. when the page is loaded call from within the loaded page a function to hide the image (parent.HideImage)
I think the onload event of the iframe is not supported in all browsers

Categories

Resources