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!