I have a Ruby on Rails app that uses Twitter Bootstrap.
On a page, there is a carousel that uses large images. Because on this, I show a loading GIF on the page until all the images are loaded.
So, initially, there is the GIF
<div id="loading-div" class="centered">
<img src="<%= asset_path("page-loader.gif") %>" />
</div>
And after the page is loaded, we hide the carousel, wait for one of the images to load, then hide the GIF and show the carousel. But sometimes, the onload event is called. E.g. when I've already visited the page and I navigate somewhere else then navigate again to the carousel page.
Here's the JavaScript:
$('#home-carousel').hide();
$('#first-image').load(function(){
$('#loading-div').fadeOut(function(){
$('#home-carousel').fadeIn();
});
});
Is there anyway to recheck if the image is already loaded? And if so, don't display the GIF?
Is it possible that the image is loaded before the "onload" and "hide()" are set for the carousel and image?
What's the best way to handle this kind of scenario?
Thanks for your time.
Related
I have a website and inside website I have a <div id="gallery"> that have 10 images. I want the website to load immediately, but gallery should show a loading icon until all the images on the website finish loading. And the gallery should be visible after all the images are loaded
It's all like https://www.udemy.com/.
I already tried this code, but this is not working:
$(window).load(function(){
$('.loader').fadeOut();
});
Try Images loaded plugin imagesLoaded plugin. And then
$(your gallery div).imagesLoaded(function() {
$('.preloader').fadeOut(1000);
});
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.
Is there a way to tell browser to show a loader image while a page is loading in background?
I am building an app which is basically a html5 app which will be loaded on webview. All files will be located on device itself, there is no interaction with server so AJAX can't be used.
If user navigates to other page then immediately loader should appear and then hide when page is completely loaded.
Is this something that can be done using JS?
Thanks
UPDATE:
I did exactly as mentioned by you all, showing loader on document ready, also showing it while page is getting unloaded and then on document ready, but the loader is not visible during the time when page has unloaded and the other page has not yet downloaded. Is there a way to bind loader to browser rather than a page?
You can place a loading screen over all content (position:absolute, 100% width and height) and fade it out when the page is ready.
demo: http://jsfiddle.net/G8GkA/
<div id="page">
<div id="loader"><span>loading...<span></div>
content....
</div>
fade out on load (using jquery):
$(function(){
$('#loader').fadeOut();
});
You could do something like this
<body>
<div class="LoadingStyle" id="LoadingInfo"></div>
<div style="visibility:hidden" id="Content">
<!-- All your content goes here -->
</div>
</body>
and in document ready you could do as such
$(function() {
$("#LoadingInfo").hide();
$("#Content").css("visibility", "visible");
});
The basic idea is to show something while document is not ready.
EDIT
You could play with it. It is not necessary to hide the content. You can overlay it with an absolutely positioned div and hide it only.
Have a page(PageLoader) which will load other pages using ajax, then the loader can be shown.
The PageLoader will take the page name as parameter and load the page.
My background image is decently large. When my page loads, the HTML is rendered before the background image is loaded onto the page. I would like for the background image to be the first thing to be loaded on the page and then the HTML. Right now it looks weird because without the background image, the text gets pushed up and when the background image is loaded, it all gets pushed to its regular position (not too professional-looking).
Is there anyway in javascript to accomplish this?
Thanks!
I think pre-loading an image is not a solution to you problem since you want the Images to load Before the HTML document is displayed to the user.
i dont have an exact solution but what i did was show a LOADING image to the user while the page loads up and then hide that loading image when the body and images are completely loaded. to do this
<body onLoad="document.getElementById('mydiv').setAttribute('style','display:none');">
<div id=mydiv style="position:absolute;top:0px;left:0px;width:100%;height:100%>
<center> <img src="loading.png>
</center>
</div>
<!-- Other HTML content here -->
</body>
This is just a rough code, hope this helps
You can write javascript that adds the rest of the page to the DOM once everything is loaded.
It's one of the easiest things you can do with jQuery.
However, I don't see the point. As a user I don't want you to do that to me.
Say I have the following code in my html:
<html>
<....>
<img src="the-image.gif" />
<....>
</html>
Is it possible to avoid loading the image using javascript? I want to load it later, using javascript. But I don't want it to be loaded automatically.
I am trying to delay the request of the image.
Thanks
You can use the LazyLoad jQuery Plugin.
Lazy loader is a jQuery plugin written
in JavaScript. It delays loading of
images in (long) web pages. Images
outside of viewport (visible part of
web page) wont be loaded before user
scrolls to them. This is opposite of
image preloading.