Having an issue with AJAX returning some images to the page and then resizing them

I have an input that allows users to input a URL. Once they click out of the input, I make an AJAX call which returns some images (if any are found) from that URL and returns them to the page. Upon success, I have some jQuery which grabs each image and resizes and crops it before showing them. The problem is, this doesn’t seem to work on first try. If I enter a url, tab out, it will return all images without being resized/cropped. Without refreshing the page, if I click in that input again and tab out once more, then it returns images and resizes and crops them like it should. I can’t figure out what I’m missing here that would cause this to not work on first go around? Here’s the code I’m using: http://dpaste.com/3780GWE[1]

Here’s a video I made to show the issue: https://www.youtube.com/watch?v=weX515qm5I8&feature=youtu.be

I’m guessing that the issue is that on first load, the images haven’t fully loaded yet after they are appended to images div and since they haven’t fully loaded, my code can’t determine a height and width and therefore skips the resize and crop code. Then, the second time you tab out of the input area to start the AJAX, those images have already been cached and therefore can complete all of the code?

Any ideas would be appreciated!


It could well be caused by what you suggest (the images haven’t loaded first time round).
Is there any chance you could post a link to a demo of this?

Unfortunately it’s just local. I probably could get it working live, but honestly it would take a lot of work and I’d be afraid of forgetting something and end up breaking my live site.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.