Problems with jQuery Plugin

Question

I have made a jQuery plugin.

But it doesn't work properly. Sometimes it does work, but sometimes not.

I think it's some of the variables that doesn't load fast enough...

Here's the source: http://pastebin.com/h4tfCWNM

Hope someone can help

Thanks in advance

EDIT The plugin is used for my image uploader, when i upload an image it should appear in a fancy way. I use this plugin for uploading: valums.com/ajax-upload And onComplete i use my plugin to show the image.

Answer 1

I've made some further investigation, and i have concluded the 2 variables elementWidth and elementHeight doesn't load fast enough. How can i ensure they are loaded before i continue running the script?

Answer 2

Correct me if I'm wrong:

1. An image upload form, using AJAX Upload, allows users to upload an image onto your server.
2. AJAX Upload calls an onComplete callback with the URI of the newly-uploaded image.
3. You create a new img DOM element with src set to the URI of the uploaded image.
4. The img DOM element is added to the document.
5. showhide is called on the img element.

If this is correct, then it explains why elementWidth and elementHeight are sometimes not correct. The problem is that the browser needs time to download the image, and elementWidth and elementHeight are not valid until the image has been fully loaded.

To fix this problem, I would try calling showhide in a load callback on the img that is registered before the src attribute is set:

var     $myNewImage = $('<li><img alt="" /></li>'),
        $i = $myNewImage.children('img');

$i.hide();
$myNewImage.rightClick(function(e) {
        // ....
});

$myNewImage.prependTo('.uploadedImages');
$('.uploadedImages li').each(function() {
        var indexNumber = $(this).index();
        $(this).children('img').attr('id', 'image_' + indexNumber);
});

$i.load(function() {
        $i.showhide({ appear: true });
});
$i.attr('src', 'uploads/thumbs/' + file);

Answer 3

@Daniel Trebbien Actually my code is a bit more advanced than that: http://pastebin.com/XQKGzX2j I can't figure out how to implement your code