Блог

в jQuery я загружаю некоторый HTML-код в div, подобный этому:

 $("#test").html("Hello <img src='pic.jpg'>");
  

Есть ли способ узнать, полностью ли загружен HTML-код?
Я имею в виду, что я установил содержимое, но для загрузки изображения требуется некоторое время.. Я хотел бы подождать, пока не будет загружен весь HTML…

Я мог бы использовать $(«img»).load(… но это не работает для содержимого, загруженного с помощью $.html Есть другие идеи?

Спасибо

 $("#test").html("Hello <img  class='futureImg' src='pic.jpg'>");

$(".futureImg").live('load',function () { alert('lalala');});
  

попробуйте:

 $('#test').html("Hello <img src='pic.jpg'>").load(function(){
 // Ur task when it loaded.
});
  

Вы могли бы использовать обработчик JS Image onload и добавить туда разметку:

 $("#btn").click(function(){
    var img = new Image();
    alert('onclick');
    img.onload = function(){
        $("#mycontent").html("<img class='futureImg' src='http://upload.wikimedia.org/wikipedia/commons/6/67/Rita_25_sept_2005_1640Z.jpg'>");
         alert('onload');
    }
    $("#mycontent").html("Image loading...");
    img.src = 'http://upload.wikimedia.org/wikipedia/commons/6/67/Rita_25_sept_2005_1640Z.jpg';
});
  

http://jsfiddle.net/FPu4P/6/

Обратите внимание, изображение будет кэшироваться после открытия в первый раз. Это довольно большое изображение, поэтому загрузка может занять минуту или две.

Редактировать

И вы действительно могли бы одновременно выполнять .html() добавление и кэш JS (насколько я могу судить):

 $("#btn").click(function(){
    // Just so the image is not cached
    var r = Math.floor(Math.random()*1111111111);
    var url = 'http://upload.wikimedia.org/wikipedia/commons/6/67/Rita_25_sept_2005_1640Z.jpg?' r;
    var img = new Image();
    alert('onclick');
    img.onload = function(){
         alert('onload');
    }
    $("#mycontent").html("<img class='futureImg' src='" url "'>");
    img.src = url;
});
  

http://jsfiddle.net/FPu4P/7/

почему вы не используете .ready() ?

Документация:http://api.jquery.com/ready /

Хитрость заключается в том, чтобы настроить прослушиватель событий, прежде чем направлять <img> на файл:

 $("#test").html ("Hello <img />");
var newImg = $("#test > img");

newImg.load( function () {
    alert ('Success!');
} ).attr ('src', 'pic.jpg');
  

Посмотрите на это в действии в jsFiddle.

 $("#test").load(function() {
    //your code after #test loaded
});
  

 $("#test").html('Hello <img src="pic.jpg">').find('img').load(...)
  

Другим решением, еще не упомянутым на этой странице, было бы использование отложенных объектов jQuery следующим образом:

 var rq_html = $.get('.../somepage.html');
var rq_img = $.get('.../img/someimg.jpg');

$.when(rq_html, rq_img).then(function() 
{
  // both requests completed, append received html into DOM
  // and either rely on cache or insert img manually
}, function()
{
  // this function is failure handler in case one of the requests fails
  // the other request may still be pending at this point,
  // you might want to cancel it or handle the situation in another way...
});