0

So I'm trying to replace a bunch of images through ajax call, but the same image is loaded multiple times in some instances, which is caused by the asynchronous nature of the ajax call. (the success function being called not sequentially) I realize that the jQuery.ajax function does have a parameter for async: false, but the page that I'm loading with the ajax call is somewhat large and would have terrible load time if loaded synchronously. Is there a way use async still but at the same time ensure that each image will be loaded correctly?

jQuery(document).ready(function($) {
    var thumb = $('.ihPhotoThumb');                 //original image elements
    for(var i = 0; i < thumb.size(); i++){          //go through all the images
        replaceImage($('.ihPhotoThumb').eq(i));     //call this function to replace the images
    }
});

function replaceImage(elem1){
    jQuery.ajax({
        url: elem1.parent().attr('href'), 
        success: function(data){
        var image_url =(jQuery(data).find("#ihf_detail_mainphoto_lrg img").attr('src')); //get the image url, which is wrapped in "#ihf_detail_mainphoto_lrg img"
        elem1.attr('src', image_url);              //replace the picture
    }
});

}

The page in question is located here: http://www.idxre.com/toppicks/52813/OffBeachUnder3m/71472 The script starts at line 1714.

kenttam
  • 740
  • 4
  • 9
  • You should debug and check the URL of your AJAX calls. Same URL is same image, that's all. – Alexander Jun 14 '12 at 06:02
  • *the same image is loaded multiple times in some instances, which is caused by the asynchronous nature of the ajax call* -- I'm not sure I understand this. Do you mean because some of the *href* results point to the same image? – McGarnagle Jun 14 '12 at 06:10
  • None of the href or src point to the same page/image. – kenttam Jun 14 '12 at 06:33

2 Answers2

0

As Nosredna said on another post (same basic question):

"You have two choices that I can think of. One is to chain them through callbacks. The other is to make the calls synchronous rather than async.

Is there a reason you want them sequential? That will slow things down.

To make the call synchronous, you'll set the async option in the Ajax call to false. See the documentation at http://docs.jquery.com/Ajax/jQuery.ajax#options (click options tab to see them)."

There's also a plugin link there you might find handy.

Link: How to make all AJAX calls sequential?

Community
  • 1
  • 1
ahren
  • 16,803
  • 5
  • 50
  • 70
0

I was able to solve my problem by the method described here: http://damiannicholson.com/2010/07/07/jquery-ajax-queue.html

I guess the solution I had been looking for was one that would make the Ajax call asynchronous but sequential, so Nosredna pointed me to the right direction.

I am no expert at javascript so maybe somebody can improve upon my answer. But I think what was originally causing the problem is that the success function returns asynchronously, and when two success functions are executing at the same time the elem1 variable gets overridden by another success function, which didn't make sense to me since the function scopes the variable but perhaps someone can elaborate.

kenttam
  • 740
  • 4
  • 9