i'm tring to find the best way to preload image for a carousel
in my jquery function i do
$('<img />').attr({ 'src': imgurl }).appendTo(currentli).hide().load(function() {
console.log("preload!");
});
searching for the best way to do it, i found old 2008 questions where it was suggest to use
var img = new Image();
img.src = imgurl;
document.body.appendChild( img );
img.onload = function() {
console.log("preload!");
}
any difference using jquery and javascript? any other suggestion?
yeah, wait until the window is ready with the the window load event, and then display the actual div element that contains the photos AND run the functionality. Something like...
$(window).load(function(){
displayAndRunMyCarousel();
});
the simple javascript version first loads the image in the memory as the src is defined and then you add it to the DOM..
the jquery version first adds it to the DOM and then loads the image.. that's all the diff these have
after comment update:-
var img = new Image();
img.src = imgurl;
$('<img />').attr({ 'src': imgurl }).appendTo(currentli).hide().load(function() {
console.log("preload!");
});
by doing this you can load the image before actually it was being added to the DOM
Related
I need to print images using JavaScript. I couldn't find a jQuery solution to this, so I tried the following:
var printWindow = window.open('', 'Print Image', 'height=400,width=400');
printWindow.document.write('<html><head><title>Print Image</title></head><body></body></html>');
var img = printWindow.document.createElement('image');
img.src = 'http://ecx.images-amazon.com/images/I/51j68MN%2B99L._SL500_SS100_.jpg';
img.onload = function() {
printWindow.print();
printWindow.close();
};
printWindow.document.body.appendChild(img);
printWindow.document.close();
Unfortunately, the popup HTML is this:
<html><head><title>Print Image</title></head><body><image></body></html>
So it appears that the src attribute isn't being set for the image.
I had previously put the image tag in the document.write() function, but I discovered the print window was blank for some images. My theory was that the print window was opening before some of the images finished downloading and thus showed (and printed) blank. So that's why I tried this method.
Why isn't this working, and how can it be fixed?
printWindow.document.createElement('img');
use correct tag name
look at http://jsbin.com/nurohutatasi/1/
Have you tried
var img = new Image();
instead of
var img = printWindow.document.createElement('image');
<image> isn't a correct image tag (<img> is it)
You are appending the image before it is loaded. And also, closing the printWindow before the image load and print (the last two lines). img is the correct tag name:
var img = printWindow.document.createElement('img');
img.src = 'http://ecx.images-amazon.com/images/I/51j68MN%2B99L._SL500_SS100_.jpg';
img.onload = function() {
printWindow.document.body.appendChild(img);
printWindow.print();
printWindow.close();
};
//printWindow.document.body.appendChild(img);
//printWindow.document.close();
I got a web application, in which there are some images.
Will show a overlay in my page at start and that will automatically fadeout on all images loades.
I need something like this
its rough code
var image1="image1.jpg";
var image2="image2.jpg";
var image4="image4.jpg";
image1 & image2 & image4 loaded then fadeout #preload and show content.
Please help me ... I tried this .. but not working ..
var img1 = new Image();
img1.src = "../images/wall.jpg";
img1.onload = function() {
alert("loaded");
};
var images_loading = $('img').length;
$('img').load(function(){
if(!--images_loading) {
// all images loaded
}
});
Please mind you can't use display:none to hide images.
Using display:none will block image download by your browser. User visibility:hidden instead.
Try this fiddle. I've made it using mostly raw javascript.
If you want, you could use jQuerys .load to replace the onload function, and append to replace appendChild
I am looking for the CORRECT way to do the following:
$("#some-image").fadeOut();
$("#some-image").attr("src", "new-src.png");
$("#some-image").fadeIn();
For timing purposes, the following sets it up closer, but I know this is still incorrect:
$("#some-image").fadeOut(function(){
$(this).attr("src", "new-src.png").fadeIn();
});
What is the correct way to do the following, in order:
Fade Image Out
After Image has faded, load a new src
After new image has completely loaded, fade image back in
Cheers!
Your problem may be that the new image doesn't load until after the DOM element containing it has already faded in. Ensure the image has fully loaded before calling fadeIn():
$("#some-image").fadeOut(function(){
var tgt = $(this),
img = new Image,
src = "new-src.png";
img.onload = function() {
tgt.attr('src', src).fadeIn();
};
img.src = src;
});
Even better, load the image ahead of time:
<script>
// Outside of $(function() {})
function preload_img(src) {
var img = new Image;
img.src = src; // loads immediately, maybe even before DOMReady
}
</script>
Then you won't have to worry about whether or not the image has been loaded when the user triggers your fadeIn/Out.
Use a callback function. Once the fadeOut completes, we change the src and fade the imagein after the src has been changed.
$("#some-image").fadeOut(function(){
//after the fadeout completes, change the src of the image.
$(this).attr("src", "new-src.png").fadeIn();
});
image = document.createElement("image");
image.src ="http://jsfiddle.net/img/logo.png";
e = document.getElementById('id');
$(image).load(function() {
$(image).hide();
e.appendChild(image);
$(image).fadeIn(1000);
});
What makes this code to run only in Chrome?
http://jsfiddle.net/QLFf3/1/
You need to create an "img" element. There is no native element called "image"
Edit
Since it appears you are using jQuery, you can just do this:
$('<img/>')
.attr('src', 'http://jsfiddle.net/img/logo.png')
.css({display:'none'})
.appendTo('body')
.load(function(){
$(this).fadeIn(1000);
});
Of course, the .appendTo() bit needs to target whatever place in DOM you are aiming for.
you can use
image = new Image();
instead of
image = document.createElement("image");
see http://bytes.com/topic/javascript/answers/775889-document-createelement-img-vs-new-image
Check this out.
Try, image = new Image();
I am using
if (document.getElementById('<%= MainImg.ClientID %>').complete) {
hideLoadDiv();
}
to hide a div which indicates the image is not loaded yet,
but it hides before the image has finished loading and is shown, while the browser is giving me a message that the page is still transferring data from the server :S
Is there another function I can use to make sure that the image is fully loaded?
You can use the onload event on the image iteself:
<img src="foo.jpg" onload="hideLoadDiv();" />
Update: looks like your question is a dup
javascript
img = new Image();
img.src = "foo.bar";
img.onload = function() {stuff();};
img = new Image();
img.onload = function() {stuff();};
img.src = "foo.bar";
src should go last