i am using iframes in html.loading different html pages into iframes.in that html pages i have image. whenever i load the image into iframes i getting flickering.
can we stop that flickering by using Iframes
How to do ?
There are a few things you can do to help with this.
Firstly, make sure you specify the width and height of the image. The browser will then reserve space for the image, rather than resizing the reserved space when the size of the image is known.
If you wan supply an example, we can talk about pre-loading if it seems necessary.
Hmm, I'm not entirely sure what sort of an flicker you want to get rid of, but I'd imagine it's related to the browser loading and then showing your new page with the image.
Well I can not think of any good ways, other than loading the next image into another iframe on background and then switching between the currently visible and the newly loaded iframe.
The bigger question is, why do you need to use the iframes? Are you loading something from a site that you do not own? If not, consider ajax and other such techniques.
You can avoid the flickering by adding an onLoad callback event to the . Once you onLoad callback fires, you will be able to fade in the iframe and its contents. This is how Lazy Loading works. Example:
<iframe id="ifrm" src="http://www.example.com" onload="showImage()"></iframe>
In the above example, the Iframe will render your content. Once the above iframe finishes loading it will attempt to call a function called showImage(). All you have to do is define showImage in your script file. You can now use this function to find the iframe DOM node and alter the styling to fade it in, or show it (display: block). Example:
<script>
function showImage() {
var iframe = document.getElementById('ifrm');
iframe.style.opacity = 1; // using opacity. You can transition this
iframe.style.display = 'block' // using display. No transition
}
</script>
If you would like to fade it in, you can add some css to your iframe like below. Example:
#ifrm {
opacity: 0; // Before the iframe load, make sure it is not visible
transition: 0.3s // This will make your iframe fade in on load
}
Hope this helps.
Related
I have a site that show many images hosted in a server. In the page, the images are situated in of max 100 images. In a single moment, only one div is displayed (throw the css style "display") and the others have the display:none.
I need a way that allow me to load only the images of the div displayed because when I open the site, it loads all the images.
when You are using display:none - the images are still being downloaded. But if You'll use display:none on background-image they won't. Another approach is to make a button "Load more..." and asynchronously request the rest of the images
your can hide the images which you dont want to display on page load, try following code in document.ready function
$(document).ready(function(){
$("#img1").hide();
$("#img2").hide();
$("#img3").hide();
.
.
.
$("#img_n").hide();
});
One way you could do it is by making a large image sprite, which you will upload and let the browser cache it.
A good explanation about CSS sprites can be found here: http://www.w3schools.com/css/css_image_sprites.asp
Just leave the img tag's src="" blank on all but the first image and modify it with javascript.
You can use an onload event to trigger setting the next src property.
The closest thing I can find to what I'm trying to do on SO is this, but sounds like this is not a workable solution anymore and it is not specific to iFrames anyway:
Click through a DIV to underlying elements
Basically I have a DIV that gets added to a page that contains an iFrame. The iFrame contents can be minimized so they don't always take up all the space of the iFrame. The iFrame is transparent so that you can still see the web page behind it. I need to be able to click on the elements in the web page behind it, but have had no luck so far.
They have a roughly 400x400 iFrame but when the contents in it are minimized, you can still click on the web page behind it. I tried doing something similar but can't get it to work.
Even in the transparent regions I cannot click on the page behind it. I also tried using pointer-events:none as mentioned in other posts but this does not help. It only disables the elements in the iFrame but has no affect on being able to click through it.
Do anyone know how to achieve this? A way to have a larger iFrame, where the contents in it can be minimized and you can still click on what's behind the iFrame?
UPDATE:
It would appear that this is not possible when using frames.
Have you tried pointer-events: none?
http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
Strategy 1: iFrame Resizer
If you're able to get scripts into both the host page and the page contained within the iFrame, you can use Bradshaw's iFrame Resizer JS.
It will dynamically resize your iFrame to fit its content. Works cross-domain.
The use cases for it include:
You are authoring both the host page, and the iFrame page.
You are authoring either the host page or the iFrame page, and are collaborating with the author of the other page.
I can't tell if your use case meets either of those criteria.
Strategy 2: Overlapping iFrames
Using JQuery, you can toggle the visibility of 2 (or n) iFrames which overlap completely or partially. You can load each iFrame with the same content, or different content. When any iFrame is invisible, you can click through it to the content behind it, whether that's another iFrame, or anything else.
In your application, you would be sizing the 2 iFrames differently: iFrame1="full size", iFrame2="minimized."
In my application (below), the 2 iFrames mostly overlap and have the same content, but I was padding them differently and shifting their position slightly, depending on whether something else on the page was present or absent. I'm also resizing both iFrames dynamically to fit their content using iFrame Resizer (above), but that might not be required for your application.
I recommend using different border colors for your iFrames (below), while you fiddle with their position and size.
I only learned JS like, 5 mins ago, so, my apologies if I've misunderstood your question.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
// This is the Bradshaw resizer script. Required iff you need dynamic resizing.
<script src="[https://MyiFramehost.com/web/embed/js/inline.js]"/></script>
<div id="padded" style="width:100%" >
<iframe id="oos_inline" style="border:solid;border-color:green;width:100%;position:relative;padding:65px 0px 0px 0px;top:-65px;"></iframe>
</div>
<div id="normal"style="width:100%;" >
<iframe id="oos_inline_padded" style="border:solid;border-color:blue;width:100%;position:relative;padding:0px 0px 0px 0px;"></iframe>
</div>
<script>
var iframe_padded = document.getElementById("oos_inline_padded");
var iframe = document.getElementById("oos_inline");
if(document.getElementById("home-page")!=null){
iframe.src = "https://the_embedded_site.com";
$(iframe).show();
$(iframe_padded).hide();
} else {
iframe_padded.src = "https://the_embedded_site.com";
$(iframe).hide();
$(iframe_padded).show();
}
// This starts dynamic resizing. Required iff you need dynamic resizing.
iFrameResize({log:true})
</script>
I think you missed:
myDiv.style.opacity = "0";
myDiv.style.filter = "alpha(opacity=0)"; /* For IE8 and earlier */
BTW, use a CSS class instead of applying CSS via JS. Let me know how it goes.
The website I'm making has a large image fading in from black when the website loads. It's a good quality image and the effect turns out nice.
The problem is that when a person visits the website a first time, the fade doesn't occur and the image just appears. I figure that the opacity is changed right away, but the image itself hasn't been downloaded. Once it's cached, revisiting the site shows the effect.
What are some ways to ensure that the image is fully downloaded before the fade in begins (the fade is simple jQuery: $('#bg').fadeIn(1000);)?
EDIT - Thank you everyone. It's been solved. I left something out that I didn't realize was important. It wasn't an img tag, but a div with an image background. When I changed it to an img, the $(document).ready() function loaded the image before the fade. Thank you!
$(function() { $('#bg').fadeIn(1000)) })
Just take a look at .load() event handler in jQuery. It is called when everything in the associated element has been loaded - if you attach it to img tag with your image, the callback will be called when the image was fully loaded.
You should put the Script of loading the IMG at the top of the HTML ( HEAD is in option)
BUT
its a bad practice.
you can maeke a basic page and at the button scripts - you can download the img - and by the load event - you can FADE it IN.
i think it's easier to use the ready function
http://api.jquery.com/ready/
I am currently using the code below to load images but I want to show some kind of loading gif before the image loads completely.
$('#addimage').attr('src', src[i]);
$('#addimage').show();
Since I am using this in a animated mediabox the image loading in blocks does not look good so by the time the image is loading I want to replace it by showing a loading gif. Thanks
Use the load() event:
$("#addimage").load(function() {
$(this).show();
});
Edit: to show one image until another loads is a little more convoluted but entirely possible. See Image Loading.
You can use the callback event for once the image has loaded. Something like:
$('#addimage').load(function() { $(this).show() });
$('#addimage').attr('src', src[i]);
So you setup the load handler first, then apply your src attribute. This is assuming the image is hidden by default (via CSS, etc).
You can bind the onload event to the image.
Why not just set the src attribute to point to a loading image (EG, animated gif) and just show it the whole time?
I can see that this question has been asked several times, but none of the proposed solutions seem to work for the site I am building, so I am reopening the thread. I am attempting to size an iframe based on the height of it's content. Both the page that contains the iframe and it's source page exist on the same domain.
I have tried the proposed solutions in each of the following threads:
Resize iframe height according to content height in it
Resizing an iframe based on content
I believe that the solutions above are not working because of when the reference to body.clientHeight is made, the browser has not actually determined the height of the document.
Here is the code I am using:
var ifmBlue = document.getElementById("ifmBlue");
ifmBlue.onload = resizeIframe;
function resizeIframe()
{
var ifmBlue = document.getElementById("ifmBluePill");
var ifmDiv = ifmBlue.contentDocument.getElementById("main");
var height = ifmDiv.clientHeight;
ifmBlue.style.height = (ifmBlue.contentDocument.body.scrollHeight || ifmBlue.contentDocument.body.offsetHeight || ifmBlue.contentDocument.body.parentNode.clientHeight || height || 500) + 5 + 'px';
}
If I debug the script using fire debug, the client height of the iframe.contentDocument's main div is 0. Additionally, body.offsetHieght, & body.scrollHeight are 0. However, after the script is finished running, if I inspect the DOM of the HTML iframe element (using fire debug) I can see that the body's clientHeight is 456 and the inner div's clientHeight is 742. This leads me to believe that these values are not yet set when iframe.onload is fired. So, per one of the threads above, I moved the code into the body.onload event handler of the iframe's source page. This solution also did not work.
Any help you can provide is much appreciated.
Thanks,
CJ
DynamicDrive has such a script, which I think does what you're asking for.
There's also a newer version now.
2011 update:
I would strongly recommend using AJAX over something like this, especially considering that a dynamically resizing iframe only works across the same domain.
Even so, it's a bit iffy, so if you absolutely must use AJAX over standard page loading, you really, really should use things like history.pushState (and have standard page loading as a fallback for browsers that don't support it). There's a jQuery plugin which handles this stuff for you, written by a GitHubber, called pjax, which they use only for repo navigation.
you moved the handler? maybe you should move the function to the inner frame as well, so that when you grab height values you reference the body directly rather than frame object... then call a parent.set height function
another trick, call function after settimeout of 10 msecs
i remember I had that problem once but I used IE's getBoundingClientRect() to get height of content, check mozilla developer center for something similar, this is just a hint, i did not research it
on another note, what is ifmBluePill? is it the iframe? or a div inside of it? why do you reference "contentDocument" of a div?
By the way, DynamicDrive improved their script to always resize even if the iframe contents change: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm
From their page:
This is version II of the original
Iframe SSI script, which like the
original script lets you seamlessly
display external content on your page
via an IFRAME. It does this by
dynamically resizing the IFRAME to be
the height of the page contained
within it, eliminating any possible
IFRAME scrollbars from appearing while
snugly showing the entire external
content. Think of it as SSI (server
side includes) emulated using DHTML!
This script works in both IE5+ and
NS6+, and for other browsers, supports
the option to either completely hide
the iframe in question or display it
using its default height.
Now, this script differs from the
original in that you can load
additional documents* into the IFRAME
even after the page has loaded, and
the IFRAME will dynamically adjust its
height to fit the new document. So use
this script if you need to not only
display external content via the
IFRAME tag, but intend to change this
content after the page has loaded.