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.
Related
I have a web page which is loading more than 1000 images per page and these images are located on Amazon severs.
I have added jQuery plugins to this page which are local to the webserver, I am not using any remote JS or CSS.
When the page is loaded for the first time or refreshed the page looks distorted and images are overlapping each other. When the content is fully loaded or cached the page displays correctly.
Is there is a way to load the images in a way that will make the page look good during loading?
Display gif images while original image is loading.
Try
jQuery Image Loader
or
http://bradsknutson.com/blog/display-loading-image-while-page-loads/
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 have an image carousel on my page with some fairly small images. the issue is not with the images but with the script itself. I want to display a javascript loader image while the entire plugin is loaded and is ready for action.
when i launch the page, the carousel <li> first display like a normal list, then get formed into the carousel. i want to avoid that and display a loader image while the entire thing is loaded.
try this image loader or you can find more image loaders in the internet, you can run image loader indipendently from what page containing. so it is not a part of carousel.
I've seen a few tutorials on how to create a JavaScript preloader for images. Is it possible to use a JavaScript preloader for other JavaScript?
My website uses mootools (and others too) for animations and a copious amount of pictures, etc -- therefore it takes awhile to load. Is it possible for the website to have a "loading" centered in the page -- and nothing more -- until all the Javascript libraries load, all the images load, etc. The website has around 300k of JavaScript (compressed), 800k of images on the front page.
In pure flash design, it's possible to have the flash movie simply say loading before any of the associated libraries, other code, images, download and appear. Can this be done in JavaScript?
Execute all your code on window.onload()
Here's a ridiculously simple example to give you the basic idea: http://jsfiddle.net/kennis/jHJ3T/1/
Think of the hideous red div as your preloader. Once the document loads all the resources (images, js files, whatever), the preloader disappears and your content is now visible and your javascript libraries have been fully loaded and are ready to execute.
If you want run the jsfiddle example more than once, change the "random" values at the end of the image tags so your browser doesn't pull cached versions.
I can't seem to find any solid code on this at the moment, but I wanted to know (if possible) how to have all the images on a webpage preloaded using JavaScript or JQuery, for example.
Maybe have a pre-loading screen or overlay that displays while the images are being preloaded to the site, then fades out or disappears when done. Any help/direction on this would be amazing!
Thank you!
You could display a splash screen or a loading screen while the page is loading, and then remove this screen when JQuery tells you the page has been fully loaded. Something like this:
$(document).ready(function() {
// add loader
});
$(window).load(function() {
// remove loader
});
Do you mean loading a group of images (like a gallery?). If so, then you could do this with jQuery. Have you checked out the Image Loader plugin? It looks like it would do what you want:
http://www.staticvoid.info/imageLoader/
It would be trivial to put a div over the top of this before you run it and then remove it in the complete() callback.
You may also want to check out this SO topic that also talks about a plugin (which is going to be your best option, IMO): JQuery wait for page to finish loading before starting the slideshow?
This is my preloader. Show preloader first, and when the whole page is loaded, hide preloader and show content. Try this, it's very simple and easy to change. This is link to my blog post with demo and code (~1 Kb):
Preload web site using jquery
This will preload all of the images in CSS for your website automatically:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
I don't think you should have a loading screen since this would be very annoying to your users.