Image width issue in Google Chrome

I'm writing a simple jQuery plugin that displays images with a specific class in the center of the screen (when clicked, full-sized). I am using this html code, where my image is displays:

<div id="source">
   <img src="" alt="" />
</div>

In "src" attribute I place path to full-sized image, wait for onload event where I make some animation with jQuery:

$("#source img").load(function(){
var calcWidth = this.width + ...
}); 

But in Google Chrome (and only in Google Chrome) when onload event fires, this.width is equal to previous image's width. This means that when I first time set "src" to "img/1.jpg" with 800px width, all is ok, but when I try to set second image "img/2.jpg" in "src" with 600px width, this.width still returns 800px (in onload event!). how to explain this behavior?

UPD: I set src in this way:

function NavClick(){
        $("#source img").attr({
            src: $(this).attr("src")
        });
        currentImage = this.indx;
    }

"this" is referenced to the thumbnail image, I use the same src for thumbnail and full-sized image for test only, later I will place their in different directories. This code solve my problem, but I don't exactly understand why:

function NavClick(){
        $("#source img").attr({
            src: "#"
        });
        $("#source img").attr({
            src: $(this).attr("src")
        });
        currentImage = this.indx;
    }

Before setting new src I set it to "#", perhaps this is due to caching images, but appears only in google chrome.

Answers


Use window load event, the image is not fully loaded on the image load event (see this question)

I didn't test it, but this might just do the trick, let me know if it doesn't (or if it does)

$(window).load(function(){    
    var calcWidth = $("#source img").width() + ...;
}); 

Need Your Help

Help with thinking MVC while programming

python model-view-controller class

I am trying to convert this application i created into MVC style.

Change background color of Colorbox using JS, based on Node ID?

javascript jquery colorbox

I have a Drupal site which uses Views to show a list of nodes, which when clicked, is shown in a Colorbox.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.