I'm trying to use the jQuery Lazy Load plugin, which is working fine on my static HTML page. However, when I try to load that same page within an iframe that has a fixed height, the images do not lazy load, they load immediately.
Here is how the iframe is being called:
<iframe src="file.html" frameborder="0" height="2500" scrolling="no" width="100%" onload="resizeFrame()" style="height: 2500px;"></iframe>
I'm not familiar enough with how the DOM sees an iframe, but could it be that the plugin see the iframe height and assumes the image is inside the current viewport?
Is there a simple way to work around this issue? My goal is to have the images within the iframe load as you scroll down the parent page.
Thanks!
Edit: I should clarify that the JavaScript lazyload call is already happening inside file.html and works fine if I load file.html on it's own. It doesn't work when I load file.html as an iframe on another page.
The lazy load plugin is using the jQuery .height() method to determine if a particular element (or image in this case) is inside the viewport or not by comparing this height to the elements top offset. Since your iframe has a fixed height of 2500px, your "viewport" .height() is going to also be 2500px. This is why it is loading all of the images at once. It does not consider the height of your parent DOM, only the iframe.
Your only option is to have the user scroll inside the iframe if you want the images to lazy load.
Try to add the lazy load event to iframe Images too:
$("img.lazy").lazyload();
$( "iframe" ).children( 'img' ).lazyload();
Related
I have a page that needs to load 2 iframes, and I'm using David Bradshaw's iframe-resizer code.
I control the content of the page loaded in one of them, so I have the iframeResizer.contentWindow.min.js loaded in there, and the iframe resizes perfectly.
The 2nd iframe however loads a page I don't control, so it won't resize (I get that). However, for some reason the scrollbar I add is suppressed when I load the iframe-resizer code, even with scrolling="yes" defined.
I have the iFrameResize({log:true}) code after the "controlled" iframe. The "uncontrolled" iframe is earlier on the page (and needs to be there).
When I swap the order, i.e., I move the "uncontrolled" iframe after the "controlled" iframe (and as such after the iFrameResize({log:true}) code), then I do see the scrollbar for that iframe.
So, my question is: how can I specify which iframe(s) the iframe-resizer code needs to act on?
Thanks!
P.
Set a class or ID on the iFrame you wish to control, then pass that to iframeResize.
iFrameResize({log:true},'#myIFrame');
Or you could pass the iFrame directly.
var myIFrame = document.getElementById('myIFrame');
iFrameResize({log:true},myIFrame);
I have 2 questions :
How do I know that the contents of the frame ready/loaded (as $(document.ready()))?
How do I know that the popup (window.open()) contents ready/loaded (as $(document.ready()))?
Google said that could help $("iframe").load(), but I did not understand how
DEMO — iframe
The problem with using load() is the iframe may have already loaded before the jQuery has run, thus not triggering the function. One way around this would be to initially load nothing in the iframe (about:blank), then using jQuery to change the src attribute to get the iframe to point to the desired location.
DEMO — window.open (Disable your popup blocker for this demo.)
I'm not sure whether ready() can be used cross-domain. When loading a popup/iframe on the same domain, a script on the child page can be used to report back to the parent window that it is "ready".
The load callback will be called when the iFrame will be load :
$("#iframe-id").load(function(){
//The iFrame content is loaded
})
I'm working inside a Facebook tab iframe content page and since it takes a few seconds to appears the iframe content of my site I'm wondering If I can place a loading gif inside the iframe to show first (maybe as a body background image) while its loading the rest of the content.
I see that the iframe ussually cames with all the images. So I'm wondering If there's any way to do this or the content of the iframe loads and is displayed all together.
I tried the image as body background and it didn't work. Both came together.
You can't modify the contents of an iframe that comes from a different domain.
But, you can use absolute positioning from your main window to put an image over the top of the embedded iframe which can probably accomplish what you want without a lot of complication or change of your main page design.
Here's an example: http://jsfiddle.net/jfriend00/DajS4
If your code is in the iframe and you want something displayed before your page loads into the iframe and you don't control the parent, then there is nothing to do. You can't do anything dynamically until your code is loaded and by then the page will already be starting to show.
All you can do is to make something on your page load very, very quickly (perhaps like a small image in the first tag of the page) that should be one of the first things to show and then when your page successfully finishes loading, you would hide that small image. Other than making something show quickly, you can't do anything until you load so you can't show anything before you load. It would have to be the parent window that created you that did something earlier.
Umm,
I understand what you are trying to achieve. but the only way i know to achieve this would be to use ajax to load all your content.
Set the ajax function to run on page load. And in the body of the page place one of those gif loaders..
hope u understand what im trying to say!
You can use AJAX to load your page.
<div id="loading">loading..</div>
<div id="content" style="display:none"></div>
$(function() {
$('#content').load('http://url', function() {
$('#loading').hide();
$(this).show();
}
});
note: the location of all your javascript should be at the bottom of the page to improve load speed.
I am loading an aspx web page in an iframe within the same domain/protocol as the parent/container page. The content in the Iframe is sometimes of more height than the iframe itself. I do not want to display scroll bars on my Iframe.
I need to resize the height of the Iframe based on the wrapper 'div' tag inside the aspx page that the iframe will contain.
Below is the jquery i had written to achieve this:
$("#TB_window", window.parent.document).height($("body").height() + 50);
'TB_window' - the div in which the Iframe is contained.
'body' - the body element of the aspx in the iframe.
This script is attached to the iframe content. i am getting the TB_window element from the parent page.
while this works fine on Chrome, but the TB_window collapses in firefox.
I am really confused/lost on why that happens.
Can anyone offer any advice on how i can handle the situation better??
Your help will be highly appreciated
Thanks
You have to use manage some event on your iframe
<iframe id="iframe" src="xyz" onload="FrameLoad(this);"
onresize="FrameLoad(this);" scrolling="no" frameborder="0">
</iframe>
function FrameLoad(ctrl) {
var the_height = ctrl.contentWindow.document.body.scrollHeight;
$(ctrl).height(the_height)
}
also use for cross browser
document.domain = document.location.hostname;
in both parent page and child page
If the difference is not that big you can add
overflow:hidden
to the css class
this doesn't resize the window but could be what you're searching for.
One thing that bugs me about IE is that when it goes to load a page with an iframe it will wait until the iframe has finished loading before it will render the page. Firefox by contrast will render all the other page elements while the iframe is loading which is really nice if the iframe takes a long time to load because it gives the user some feedback that the page is progressing. It also allows you to do things like display a "iframe loading" messege while the frame loads and swap it out onload of the iframe.
So, I am wondering if anyone has found a workaround for this. Ideally, I'd like to see a cross browser solution that shows a progess bar as an iframe loads on the page. Short of that I'd take a method of implementing an iframe that forces IE to first render the page then load the iframe.
I have seen a couple of interesting jquery progress bars like:
http://plugins.jquery.com/project/jQueryProgressBar
But...(and correct me if I'm wrong here cause my understanding is shaky)...it seems to me the jquery bars only render after the DOM has loaded. In IE the iframe content is not shown until after the DOM is loaded so showing a progress bar at that point is irrelevant.
I've also tried setting the iframe src to loading.htm and then onload switch the src to the content I want. Sadly IE still will not render the page until the final content page comes up (seems strange to me).
Help me stackoverflow, you're my only hope.
What if you were to load the page with an XmlHttpRequest and then replace the contents of the document as/when it loads?
<!-- jQuery example: -->
<div id='content'>Loading...</div>
<script type='text/javascript'>
$("#content").load(url);
</script>
You could set the location of your iframe using JavaScript after the parent window has loaded.
<body onload="document.getElementById('myIframe').location='someurl';">
<iframe id="myIframe">
</body>
Would be the most rudimentary way to do it.