How to check if image url has been loaded with jQuery? - javascript

I have this code here where I have a slider with thumbnails and the sliders large image takes it's next attr('src') from the click on a thumb, but I'd like to change that src only when the image has loaded. This is the source that I've come up with so far:
$('.thumb').click(function(){
topImageSrc = $(this).data("bigimage");
$(topImageSrc).load(function(){
coverMain.attr('src',topImageSrc);
main.fadeOut("slow");
})
});
Sadly this doesn't work as the topImageSrc is just a path variable to the large image, like so: /uploads/largeimages/pic1.jpg
How could I force it to load and then check if it's done, after that - apply the new image?

You can do it like this:
$('.thumb').click(function () {
topImageSrc = $(this).data("bigimage");
var topImage = $('<img>').attr('src', topImageSrc);
$(topImage).load(function () {
coverMain.attr('src', topImageSrc);
main.fadeOut("slow");
});
});
This creates an image (without appending it anywhere), sets its source to the topImageSrc URL and checks for the load event.

Related

jQuery Guillotine - Swap Image

I am using jquery guillotine to crop image and save to the server but unfortunately when i want to do things dynamically it doesn't work as it should be . I have created thumbnails on the same picture and when you click on a thumbnail it should let you edit that picture and crop etc. I have 3 scripts on the page , 1 ) guillotine , 2) scripts that when you click on thumbnails swaps the small image with the big one , 3) and when you click on crop button gets the values and does the job in php.
after i swap the image , i call/run the guillotine but it seems like it is caching the first images dimensions. i have created a fiddle.
i dont know how to put link to jsfiddle here but it is jsfiddle / 0 unub 77 f
I'm a bit late but as said above it might help others with the same problem.
Guillotine gets the absolute image dimensions when initialized (that's why the image needs to be already loaded or cached) and after that everything is made relative to keep it responsive. If the images don't have the same dimensions you'll get broken aspect ratios and other unexpected behaviors.
So, if you have Guillotine working on an image and you want to swap that image, you should remove the existing instance of the plugin and create a new one over the new image so it can properly render such new image.
var pictures = $('.picture'),
gif = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==' // 1x1 gif
// Guillotine loader
pictures.on('load', function() {
var img = $(this)
// Remove any existing instance
if (img.guillotine('instance')) img.guillotine('remove')
// Create new instance
img.guillotine({width: 400, height: 300})
// Bind buttons, only the first time!
if (! img.data('bindedBtns')) {
img.data('bindedBtns', true)
$('#rotate_left').click(function(){ img.guillotine('rotateLeft') })
$('#rotate_right').click(function(){ img.guillotine('rotateRight') })
// ...
}
})
// Swap images as needed.
// Each time you change a 'src' attribute the function above should run.
picture.on('click', function() { /* Swap thumbnail */ })
// Make sure that the 'onload' event is triggered at least once on each picture.
pictures.each(function() {
// Save the original src, replace it with the 1x1 gif and reload the original src.
if (this.complete !== false) { var src = this.src; this.src = gif; this.src = src }
}
The 'onload' handler serves two purposes, it loads guillotine the first time for each picture and reloads it everytime a picture is swapped.
Two important points to consider:
Actions (rotate, zoom, etc.) should be binded only once to avoid problems like #5.
You have to make sure that the script runs before each image finishes loading, or otherwise you won't have the plugin before swapping images (the last part of the script handles this).
Hope it helps.
ok i figured out , when i set the img src in the second script i had to destroy everything and than call the script again.
right here is my solution to my question
you load the first image as in the demo page , and than put your javascript that does the swap image, basically change the source of the image, destroy it and than call the function again
var swap_img = $(this).find('img').attr('src'); //get the src of the image of the thumbnail
$("#sample_picture").attr('src',swap_img); //set it , swap it
picture.guillotine('remove'); //remove the current instance
guillotine_function(); //and call it again.
and everything should work as it should be
this code work without deleting the guillotine instance, img being the image element :
guillotine._unwrap();
guillotine.zoomInFactor = 1 + guillotine.op.zoomStep;
guillotine.zoomOutFactor = 1 / guillotine.zoomInFactor;
guillotine.glltRatio = guillotine.op.height / guillotine.op.width;
guillotine.width = guillotine.height = guillotine.left = guillotine.top = guillotine.angle = 0;
guillotine.data = {
scale: 1,
angle: 0,
x: 0,
y: 0,
w: guillotine.op.width,
h: guillotine.op.height
};
guillotine._wrap(img);
guillotine.fit();

Using JavaScript to dynamically change display style in img tags

I show links to 240 images on a page. The real images are uploaded by users. I tried to avoid showing an empty image if users did not upload it yet. jQuery did not work for me because of conflicts, so I have to do it in pure JavaScript.
image(s) links:
<img class="photo240" src="http://www.example.com/i/%%GLOBAL__AuthorID%%/p/b01.jpg" onerror="imgError()">
My JavaScript:
function imgError()
{
alert('The image could not be loaded.');
var _aryElm=document.getElementsByTagName('img'); //return an array with every <img> of the page
for( x in _aryElm) {
_elm=_aryElm[x];
_elm.className="photo240off";
}
}
The style photo240off equals to display:none.
Right now, whenever an image misses, all the images are turned to style photo240off and I want only the missing image to be hidden. So there is something wrong with my script.
(the overall script works well, because I get the alert).
Use this to get the image with the error.
Change to:
onerror="imgError(this)"
Then the function can be:
function imgError(el) {
alert('The image could not be loaded.');
el.className = "photo240off";
}
You need to reference the image from your onerror call and change the class only for that one.
Something like this:
HTML
<img class="photo240" src="example.jpg" onerror="imgError(this)">
JS
function imgError(el) {
el.className="photo240off";
}

Image swap on hover with jQuery: No image after click and de-hover

I implemented a jQuery swap-on-hover image function which goes like this:
// header image hover
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
};
$(function () {
$('img.logoswap').hover(sourceSwap, sourceSwap);
});
It does work perfectly as long as there is no click on the image (which is a link).
But: Once the image is being clicked and the mouse is being placed off the image (so within the seconds while the other page is loading), the image dissapears and only the alt tag is shown.
I wasn't able to recreate it in jsFiddle as they don't allow links within the frame, so here's the live example (removed because problem not visible anymore). The image hover link is the logo on the upper left. The code and markup being used can be seen in this Fiddle, but as mentioned the error I'm talking about cannot.
Is there a way to prevent this behaviour? Like locking in the latest state or something?

Replace img src but have loading graphic display while image is downloading

I have a page that swaps some fairly large images in and out. There are too many to preload when the page initially loads so that is not an option. So what I need to do is load them as they are requested by the user. Right now I'm using jQuery to replace the img's src. This works fine but the images I am loading can be around 500KB and it looks bad as they paint down the screen as they are downloading. What I'd like to do is pop a loading gif on the page when the image is in the process of loading then have the loading gif disappear once the image is loaded. I'm struggling to find a way to do that though. Here is the JS/jQuery code that I have that just replaces the src.
var product = "bowl";
var image = "dog.jpg"; //this is actually pulled from a data attribute, but its just hardcoded here for an example
$("#images img[data-product="+product+"]").attr("src", "/img/tablesetting/"+image);
I made a working jsfiddle showing this principle
http://jsfiddle.net/kasperfish/c72RT/4/
I recently needed to do the same thing. Basically I wrapped the image in a container div. within the container I've added a span element with my ajax loader gif embedded. this span has to be hidden initially but gets visible when an ajax request is made. The span gets removed when the image is fully loaded.
before ajax call
$('#your_image_container').find('span').show();
on success
$('#your_image').attr('src', 'your/image/url').load(function() {
$('#your_image_container').find('span').fadeOut();
});
I made a jsfiddle showing this principle
http://jsfiddle.net/kasperfish/c72RT/4/
Preload the image.
var product = "bowl";
var imageSrc = "dog.jpg";
var imgEl = $("#images img[data-product="+product+"]");
// show loading graphic only if it's needed
var timer = setTimeout(function(){
imgEl.attr("src", "/img/loading.gif");
},50);
// preload image
var img = new Image();
img.onload = function() {
clearTimeout(timer);
imgEl.attr("src",imageSrc);
}
img.src = imageSrc;
$img.attr("src", newImage);
if (!$img.get(0).complete) {
$img
.hide()
.after("<img src=throbber>")
.on("load", function () {
$(this).show().next().remove();
});
}

Determine when an image has loaded in svg with RaphaelJS

I'm trying to work out how to determine when an svg image has loaded in the browser. I'm using Raphael JS and I've tried:
var image = paper.image(path, 0,0,10,10);
image.node.addEventListener('load', function(){alert("test");});
and:
$('image').on('load')
all to no avail. I've also used "onload" and "onsvgload" none of which work.
Is there away to determine if an svg image has actually loaded?
I even tried loading the image using an Image() object and then calling paper.image() - but I get two calls to the image (instead of using the preloaded image);
ie:
var preload = new Image();
preload.src = imgPath;
preload.addEventListener('load', function () {
image.path = preload.src;
//Now load image in raphael - except this still forces the browser to make another call for the image
});
Any ideas?
Using the onLoad event handler works, with one additional line of code:
var image = paper.image(path, 0,0,10,10);
var image_node = image.node;
image_node.setAttribute('externalResourcesRequired','true');
image_node.addEventListener("load", function() {
console.log("image is loaded!");
})
You need to set the externalResourcesRequired attribute to true. You may read more about it here: http://www.w3.org/TR/SVG/struct.html#ExternalResourcesRequired

Categories

Resources