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);
});
Related
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>
I'm building a firefox extension that has an iframe inside a panel.
I use a xul file as src of the iframe.
When i click on a specific button inside the iframe, i want the iframe to be loaded again with the same src but hide some elements and show another ones. To do this hide/unhide, i have the code on the xul onload, and it works well loading the iframe the first time, or when changing the src.
But when i hide and show the panel with the same src, the onload isn't triggered again.
Should i be doing something before opening the panel the second time?
Hiding and showing the frame doesn't reload it - it really only hides and shows it without touching the content. To reload a frame from outside do:
document.getElementById("my-frame").contentWindow.location.reload();
Or from inside the frame:
window.location.reload();
For reference: location.reload()
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.');
});
I'm developing a mobile app that's phonegap powered with jQuery Mobile running. I'm needing the ability to load potentially large images but having the page attempt to load the images on page load without any notification as to that's what it's doing makes the page appear to be unfunctional and broken. So I need to inform the user via a loading image that there is an image being loaded. I tried using this script which I've used in dozens of other web apps but it's not working in jQuery Mobile:
var img = new Image();
// wrap our new image in jQuery, then:
$(img)
// once the image has loaded, execute this code
.load(function () {
// set the image hidden by default
$(this).hide();
// with the holding div #loader, apply:
$('#container')
// remove the loading class (so no background spinner),
// then insert our image
.append(this);
// fade our image in to create a nice effect
$(this).fadeIn();
})
// if there was an error loading the image, react accordingly
.error(function () {
// notify the user that the image could not be loaded
})
// *finally*, set the src attribute of the new image to our image
.attr('src', 'http://somedomain.com/largeimagetobeloaded.png');
As I mentioned this has worked in many other locations with out any problems but I can't seem to get it to load. Fiddler doesn't seem to show any request being fired off by the application and I've tried $('#container').page() and $('#container').trigger('create')
Can anyone give any pointers as to how to load an image via ajax into a div in a jQuery Mobile page?
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