Geek Answers Handbook

Return from jQuery "get" when all images are loaded

I am using jquery getto load html into my content div. The HTML that I am loading contains some images, and I find that my custom height calculation that I do in javascript does not work too well because the images are fully loaded upon return loadHTML.

    var loadHTML = function(){
          return $.get("javascripts/templates/" + templateType + ".html", function(text) {
              $("#content").html(text);
          });
    };

Is there any way to return only from loadHTMLafter downloading all the images? I tried to call and return load, but this does not work.

var loadHTML = function() {
    return $.get("javascripts/templates/" + templateType + ".html", function(text) {
        var content = $("#content").html(text);
        return $('img', content).load();
    })
};

In addition, I use Q promises in other parts of my application, so that I can fix my problem using this.

t loadHTML.then(loadImages).then(doOtherStuff);

+4
source share
2

,

var loadHTML = function () {
    var deferred = $.Deferred();
    $.get("javascripts/templates/" + templateType + ".html", function (html) {
        var $html = $(html),
            $imgs = $html.find('img'),
            len = $imgs.length,
            counter = 0;
        $imgs.load(function () {
            if (++counter == len) {
                deferred.resolve();
            }
        });
        $("#content").html($html);
    });

    return deferred.promise();
};


var list = [];
for (var i = 0; i < 5; i++) {
  list.push('<span><img src="//placehold.it/64&text=' + (i + 1) + '" /></span>');
}

var html = '<div>' + list.join('') + '</div>';

var loadHTML = function() {
  var deferred = $.Deferred();
  //using a timer to simulate ajax request
  setTimeout(function() {
    var $html = $(html),
      $imgs = $html.find('img'),
      len = $imgs.length,
      counter = 0;
    $imgs.load(function() {
      if (++counter == len) {
        deferred.resolve();
      }
    });
    $("#content").html($html);
  }, 500);

  return deferred.promise();
};

loadHTML().done(function() {
  $("#content").find('img').each(function() {
    $(this).after(this.complete)
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content"></div>
Hide result

: Fiddle
: ( , )

+5

, .

, , , ajax , . , , , .

, , , , . promises :

 var jqxhr = $.get( "example.php", function() {
          alert( "request sent, images are loading" );
        // DON'T PUT YOUR RETURN HERE, 
        //YOU WANT TO CALL IT WHEN THE ABOVE IS DONE
        })
          .done(function() {
            alert( "the info is loaded" );
            //put your html insert here to make sure the 
            //data is fully loaded before you manipulate it
            //you could also call htmlresize here but that would be nesting. 
            //That shit gets complicated. Just call it after this function returns on success.
            return
          })
          .fail(function() {
            alert( "error" );
            // its good to handle errors
            return
          })

, , html jqxhr.sucess, , , .

0

More articles:


All Articles