Wait for a particular image to load completely using jquery? - javascript

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?

Related

How to edit frames/second for a gif image using HTML5 tag

I have a loading image (gif) that will be displayed as a modal after window.load
I download it, but it's too fast!
How to edit the speed of it, is there something in javascript or HTML5 tag that can change the amount of frames per second?
the attached Image is below:
the gif image
You can use a lib like this one https://yahoo.github.io/gifshot/ as you mentioned you want for future, this allows for most gif options, and also using only js.
There is a demo for it also here http://www.elgom3a.com/post/the-fastest-online-video-to-gif-converter

Site with many images, load only some images?

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.

Is it possible to run javascript before images begin loading?

I'd like to change the src attribute of images before they are requested by the browser, the aim being to reduce the size of the images using a PHP script like Timthumb. Using jQuery, I thought $(document).ready would do the trick:
$(document).ready(function () {
var imgs = $('#container img');
jQuery.each(imgs, function() {
$(this).replaceWith('<img src="timthumb/timthumb.php?src=' + $(this).attr('src') + '&w=200" />');
});
});
But the original, unresized image is still downloaded in the background to the browser's cache. Is it possible to do what I'm trying to do on the client side, or is server-side the only option?
Javascript loading and execution is serialized by the browser (unless you use something like head.js), but the problem is that the DOM has to be available for a script to modify it. The jQuery ready event fires after the DOM is available, so the browser has already started requesting the resources that were referenced in the HTML.
So if you put the Javascript before the image tag it won't be able to find the image tags, and once ready fires the download has already started. I'm not aware of any events that fire before image load (just one for aborts), so the cleanest method is to create the HTML with the modified src attributes in the first place.
Alternatively, put the src in a different attribute on the image (like data_orig_src) and run the script to set src to data_orig_src on each image upon document ready. Use CSS to hide the images before changing the src so the user doesn't see a broken image icon. I think this is probably better than adding the images after the fact because you won't need to track where the images need to be placed in the DOM, and it should perform better as well.
Of course if you can change the server to use data_orig_src instead of src, why not just put the proper src in the tag in the first place...
You cannot change the DOM of the page before the DOM has been loaded. And, once the DOM has been loaded, the browser has already started requesting images. So, you cannot change <img> tags before they start loading their images.
What you could do is change the source of the page to not have any of the images you want to change in the source of the page and then use javascript to dynamically insert the desired images after the page has been loaded. This way the browser will never request the wrong images.
Or, you could change the <img> tags to not have a .src property at all and with your Javascript you would add the .src property. An <img> tag with no .src property will not display until you provide it with a .src property.
If you're worried about the wrong images flashing as they are loaded before you change them to the correct images, you can use CSS in a stylesheet to hide the images initially and then after you change the img.src to the correct value and that new .src value has loaded, you can make them visible.
If you can't change the source of the page, then all you can do is hide the images initially (using CSS) until the correct .src has been set on them and that new .src value has been loaded.
It is sort of possible but not in the way you currently have or probably want and it doesn't degrade gracefully but you can take the image out of your html and use jQuery to insert it into your html and apply whatever changes you want to it.
Example:
var image = $('<img />').attr('src', 'imageURL.jpg');
image.appendTo('domElement');
But doing it like this it doesn't make any sense to me as to why you wouldn't just edit the image source anyway.

How to load a large image before anything in the browser is rendered

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/

IFrames in HTML

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.

Categories

Resources