Are image properties part of the DOM (jQuery mismatch - webkit to other browsers)?
I'm having a problem with Chrome and Safari using jQuery to do some calculations using the image bandwidth.
When using my calculations in:
$(document).ready(function() {
/* some calculations with $("img").width() */
});
everything works fine in IE6 + and Firefox, but it's not in Chrome and Safari: $ (img) .width () is 0, whether the image is already cached or not.
Using:
$(window).load(function() {
/* some calculations with $("img").width() */
});
it works in all the aforementioned browsers, but the problem is that it only starts when all images are fully loaded.
Is webkit behavior expected behavior or is there some webkit / jQuery bug that causes image properties to not be part of the DOM?
If this is a webkit / jQuery issue: is there a way that will allow my script to execute earlier than in the above solution?
By the way, I am not using inline properties for image sizes.
source to share
Try specifying dimensions in img tags:
<img src="myimg.jpg" alt="" width="300" height="200" />
A quick Google search on the matter: http://www.websiteoptimization.com/speed/tweak/size/
What I was outputting, since the images are not loaded, webkit will just return 0 as an "unknown" size until the image is loaded. In particular, sizing can solve this problem.
source to share
I feel like this is more of a hack-ish way, but it seems to work (from what I tested):
function callback(){
var el = $(this);
// if this element was processed or width is 0 (for webkit), then skip
if(el.data('loaded') || el.width() === 0)
return;
el.data('loaded', 1); // marked this element as "processed"
// do whatever you want to do with el.width()
console.log(el.width());
}
$(function(){
// Non-webkit-based browsers will call callback() here
// otherwise, after each image loads, the callback will execute
// (for webkit browsers), when the size will be correct.
$('img').load(callback).each(callback);
})
Webkit browsers will still be slightly slower than other browsers because after each image download completes, it is faster than waiting for all images to load.
source to share
I'm not a fan of offloading tasks to a client that needs to be processed on the server.
The real solution is to calculate the size of the image when it is added to your database and then generate the <img> tag correctly with the width and height attributes before sending it to the client.
Any overhead incurred in the initial computation (and pulling the values out of the database afterwards) will be negligible compared to the process of loading it into the database in the first place - not to mention each subsequent checkout later.
The result is a semantically meaningful HTML tag that works with jQuery in all browsers you care about, so why avoid it?
source to share
I found this way of specifying image sizes when dynamically loading images using .load (), I am using the image load function with a callback
loadImage: function(src, callback){
$("<img alt="" />").attr("src", src).load(callback);
}
and then I can use the img element (which reports the correct size) to set the img attributes inside the callback
$(this).attr({
id: img,
width: this.width,
height: this.height
});
and now I can get the correct width and height using for example
var contentWidth = $("#img").attr("width");
source to share