I've got an image that is loaded when the site is called.
<img id="some_Image" src="some_source">
Now I want to reuse that image and NOT request it again from "some_source". (Because it has to be computed and I do not want to recalculate it). I want that image later to be displayed in some JQuery dialog. I know the existance of append and prepend functions, but reading the documentation it seems like I have to insert a whole image tag as an argument, which results in requesting the image again. (if the browser doesn't cache the image)
have a look at the jQuery clone
it is supposed to work with images as well, if the image has been loaded by the browser its supposed to reuse it.
EDIT:
$( "#some_image" ).clone().appendTo( "#some_div" );
By default, all browsers cache as much as they can (js, css, images). This way, the moment your image is loaded you can create a new <img> tag with the same source path and the browser will use its local cached file.
Related
I am dynamically changing images with jQuery using $('img').attr('src','newUrl');
Doing so, the image is only displayed when entirely loaded.
My connection is slow, so I would like the image to directly display and see it getting progressively loaded, the same way images “appear” when I arrive on any page on the web (whether from top to bottom, or from blurry to sharp depending on the compression algorithm of the image).
I want to do this with javascript, jQuery, or any simpler alternative.
(I know how to display a progress bar, or a "loading…" text while the image loads, that's not what I'm looking for)
Here's a fiddle if you want to update.
I've found a way to do that, what you want. Don't use attr("src",) from jquery, remove and add the hole img element with html(), so you trigger the browser to load the image source and the browser displays the image while loading (tested in chrome).
Html:
<p><button>change image source</button></p>
<div>
<img src="http://xxxxx">
</div>
Script:
var newImg = '<img src="http://yyyyyy">';
$('button').click(function(){
$('div').html(newImg);
});
Here is your updated fiddle: http://jsfiddle.net/jxwv52u7/1/
I hope it helps.
Based on some testing I did about a year ago, I found no reliable way to get a load event when changing the .src of an image from one value to another. As such, I had to resort to loading a new image and replacing the one I had with the new one when the new image was loaded. That code has been running successfully in several hundred web sites (it's used by a slideshow) for about a year now so I know it works.
If you set the load handler BEFORE you set the .src property on a new image, you will reliably get the load event. Here's some code I wrote just earlier today for capturing the load event: jQuery: How to check when all images in an array are loaded?.
This code that attaches the event handler BEFORE settings the .src works for me in the modern browsers I've tried it in (I didn't test older browsers):
$("img").one("load", function() {
// image loaded here
}).attr("src", url);
You can see it work here:DEMO and you can test any browsers you want using that jsFiddle. Just click on the image to cause it to load a new image. It cycles through three different images (setting .src each time), loading two of them uniquely every time (never from the cache) and one from the cache in order to test both cases. It outputs a msg to the screen whenever the .load handler is called so you can see if it's called.
i'm looking for a script or a way to preload images before the page become full load. What i found are script where i have to write the name and the root of the images, i need something that load like:
Load all img of the page, after show the page, during the loading of the images to show a preload image ( like loading or something like that ).
It's possible?
I have alrady tried the script on the web, but i found just script where i have to put the name of the images in a array... i don't need it!
I want that javascript load before ALL tag ( without i set the name of the images ) of the page and than show the page!
jquery has a plugin called imageready.
https://github.com/weblinc/jquery-imageready
Ive used it many times, it should work as you expect
Images will start being downloaded by your browser as soon as the DOM renders that part of your HTML. What you need to do is find a suitable animated gif very small size (few kilobytes) of a loading animation. Then have some javascript hide the image you want to show that is still getting downloaded by your browser. By using something like: Javascript callback for knowing when an image is loaded you will be able to check when an image has loaded, and the callback you can hide its associated gif and show the real image.
So there's no issue with this code functionality itself. I have something like this:
<div>
<div><img id="imageToChange" src="/path/image.png" /></div>
<div id="textToChange">Text</div>
</div>
I have another part of my code, that changes the image src/text with jQuery.
function changeImage() {
$('#imageToChange').prop('src', '/path/image2.png');
$('#textToChange').html('New Text');
}
As you may expect, this works exactly as I expect it to. But with 1 quirk.
In all the main browsers (chrome/FF/IE). The image takes a long time to change.
So for example, when I call changeImage(), the text will change instantly, but the image may not change until 1-2 seconds later. (Not large images by any stretch, about ~6KB, and local)
I haven't found anyone else really complaining about it, but what I'm wondering is if there's any way to speed up the changing of the image src? Perhaps a better way to do it?
This is jquery 1.8.0 as well.
Thanks
I have seen this behavior before. The delay is caused by the image not being cached and the subsequent load time. The only solutions I know of:
Preload your images with JavaScript Image objects.
Handle the load event on the image and update the text after the image as loaded. Note jQuery lists some issues to watch out for:
Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load()
shortcut is to execute a function when an image (or collection of
images) have completely loaded. There are several known caveats with
this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
http://api.jquery.com/load-event/
You may want to try altering the attribute using the jquery .attr function. If I recall correctly the src tag of an image is an attribute not a property. Although both .prop and .attr do relatively the same function, to ensure consistent behavior between browsers you may want to use the .attr tag instead.
$('#imageToChange').attr('src', '/path/image2.png');
As far as the delay goes, this could be due to the size of the image. The browser has to make a GET request to the server for the image and then paint the DOM with it. If the image is large, it could cause a time lapse between when the code changes the source and when the new image is properly written to the DOM. If the image is large, you may want to consider scaling it down or optimizing it for web use.
Hope this helps.
You can pre-load the image using the Javascript Image object.
In the head of your document put
<script type="text/javascript">
img2 = new Image();
img2.src = "/path/image2.png";
</script>
when you change the src of the image you fetch another image file. it makes an HTTP request for the new image, so it needs to load before showing it. could this be it?
btw, for this reason you can pre-load the image with js. either add
<img src="path/to/image.jpg" style="display: none" />
to your html or using JS
var im = new Image(1,1);
im.src = "path/to/image.jpg";
this way the image will be cached
It's the delay of network. Try this:
<div>
<div><img id="imageToChange" src="/path/image.png" /></div>
<div id="textToChange">Text</div>
</div>
<img src='/path/image2.png' style='display:none'>
it is likely the load time of your images. if this is the case, loading the image the first time should be the only slow one. a follow up load, after changing the image to something else, would be fast.
$('#imageToChange').prop('src', '/path/image1.png');
//slow, need to fetch image
$('#imageToChange').prop('src', '/path/image2.png');
//slow, need to fetch image
$('#imageToChange').prop('src', '/path/image1.png');
//fast, it already has this image
As a solution, you could try preloading your images. Or, better yet, use css sprites.
I want to show image and its text initially as we open the page for my Image Slider.
This is my demo: http://codebins.com/bin/4ldqp9c/15
here i am showing as all the DOM elements is loaded, but the need is to show the first image and its text initially for my slider as we open the page.
So I am not understanding how to load my initial image for my slider, so that its functionality starts after all DOM elements load.
I believe the term is "bootstrapping". You want the first image to load in as the DOM is loading, and before your script sets up the image slider.
One way to achieve this is to actually put the image in as part of the DOM. So, instead of an empty src in your image tag, put an actual url. Same for title and description.
I assume you're going to be doing an ajax request for the XML you're building in your example. If that's the case, then you probably have no way of knowing what the first image is, which means you'll still need a script to load data.
The performance gains from having two scripts will probably be negligible, but if you take that approach, make sure you load the smaller script in the head section of your html, and the longer one at the end of your body.
I have a website that displays a list of around 20 auto-played slideshows(each containing 4-5 images) in a page. Now the problem is that this is taking up a long time to load the website(& ofcourse it would, since so many images) but I am wanting to preferentially load all the neccessary css and js files at first, so that the other components on the page are properly rendered before the images begin to download.
So... Is there a way to set a preferential order of loading of the requested resources ?
Is there a way to set a preferential order of loading of the requested resources
Yes - put them in that order in your HTML file!
I am wanting to preferentially load all the neccessary css and js files at first, so that the other components on the page are properly rendered before the images begin to download.
That's a different problem.
Your page components cannot be properly rendered until the dimensions of most elements are known. So, if you have other images in your page layout, those need to get loaded first, or have their width and height attributes specified in the markup.
Since your slideshow images would be mixed in with the rest of your layout if you used pure HTML to load them it sounds like you have little choice but to instead load all of your slide show images from Javascript, per other comments and answers.
Better way then using the dom to create elements have your divs or even img tags src be blank then load them with the images you want in an onload function using innerHTML:
function images(){
var place_to_put_image = document.getElementById("image_div");
place_to_put_image.innerHTML = "<img src=\"your_image_here\"></img>";
}
<body onload="images()>
<div id="image_div></div>
</body>
you could put your images in an array and assign the innerHTML of the div or whatever to the array as well if you want them all in the same place or you could put the onload in div or where ever you want the images to load.
There a few ways you can go about doing it but they all involve not actually putting the images in the HTML - at least not correctly. One way that I like to do it is to add the image src URLs to another property like the alt (not great for accessibility) or rel. Also, give all the images a class that will be used to hook into it with JS.
<img alt="images/foo.jpg" class="loadlater" />
Then in your JS, get all elements with class="loadlater" and set the source to the alt value.
img.src = img.alt;
You didnt mention jQuery. If you were using jQuery, the command to swap the attributes would look like this:
$('.loadlater').each(function() { this.src=this.alt; });
Then, wherever and whenever you call this, the images will be loaded. You will want to call it after your css and js finishes loading - probably the document.load function. Again, if you were using jQuery, it would look like this:
$(function()
{
$('.loadlater').each(function() { this.src=this.alt; });
});