Jquery：是否有一個類似於$（document）.ready（）的基於元素的方法？

是否有類似於$(document).ready()的方法，可以將應用於任意元素？例如，如果ajax調用設置DIV的內容幷包含很多IMG標籤，那麼在所有圖像加載完成後是否有觸發函數調用的方法？沿線有東西：

$.ajax({ 
    url: '/get/my/page.php', 
    dataType: "html", 
    success: function(response) 
    { 
     $('#my_element').html(response); 
     $('#my_element').ready(function() {alert('all images loaded');}); 
     }  
    });

感謝您的建議。

來源

2014-10-10 Ethan Brown

沒有沒有。 – 2014-10-10 01:50:54

有些東西給它一個體面的嘗試，像http://imagesloaded.desandro.com/（如果你對圖像感興趣）。 – 2014-10-10 01:51:28

你可能想參考這篇文章： http://stackoverflow.com/questions/6571890/check-if-a-given-dom-element-is-ready – Hatjhie 2014-10-10 01:51:52

如果您特別感興趣的是正在加載的圖片，那麼您可以嘗試imagesLoaded，這似乎涵蓋了您提到的示例情況。

來源

2014-10-10 01:53:58

等同於$（「文件」）準備就緒（） - 沒有，但是，也有方法，你可以讓它工作：無論功能，您需要爲callback到執行

認沽AJAX調用：

$.get("link.php?item=1", function() { //callback function here })
你可以有一個onchange事件偵聽器觸發每當DIV正在改變和裝載元素一定數量後就可以明確觸發功能：

$("#div").on('change', function() { if ($("#div").length > DESIRED_NUMBER_OF_ELEMENTS + 1) { //Execute function here } })

的對（「變化」）可以在任何你想要的它的方式來使用：它可以觸發基於元素數量的功能的基礎上，裏面的元素的性質（如它是一個圖像，鏈接，另一個div等），任何你能想到的。

來源

2014-10-10 01:57:26 Aroll605

沿着這些線的東西應該做你想要的。

onImagesLoaded('#my_element img',function(){ 
    console.log('images have all loaded') 
}); 
function onImagesLoaded(seletor,callback){ 
    var $images = $(seletor); 
    var count = $images.length; 
    $images.each(function(img){ 
     //create an image 
     var tempImage = new Image(); 
     //set a function for the onload event 
     tempImage.onload = function(){ 
      count--; 
      //if the count is 0 it means all images are done loading 
      if(count===0){ 
       callback(); 
      } 
     }; 
     //set the source to the src of the image. 
     tempImage.src = $(img).attr('src'); 
    }); 
}

來源

2014-10-10 02:14:43 Zaptree

嘗試

var request = $.ajax({url: "/get/my/page.php", dataType: "html"}); 

request.done(function (data, textStatus, jqxhr) { 
    // parse returned `data` string for html 
    var html = $.parseHTML(data), 
     // 
     len = html.length, 
     div = $("div"); 
    // do stuff when all images loaded into `div` 
    div.on("imgsready", function(e, htmlimgs, divimgs) { 
     console.log("ready", htmlimgs, divimgs); 
     $(e.target).prepend(divimgs + " images ready<br>") 
    }); 
    // set `div` html contents to `html` string 
    $.when(div.html(html) 
      // return image `on` `load` event 
      , $("img", div) 
      .load(function(e) { 
       // return image `promise` object 
       return $(e.target).promise() 
      }) 
    ) 
    .then(function (el, i) {  
     // if `div` contains `len` length images , call `imgsready` event 
     return el.children(i).length === (i.length && len) 
       && el.children(i).eq(len -1).is("*") 
        ? el.trigger("imgsready", [len, i.length]) 
        // else check again in 1000ms 
        : setTimeout(function() { 
         el.children(i).eq(len -1).is("*") ? 
         el.trigger("imgsready", [len, i.length]) 
         : console.log(el.children(i).length) 
        },1000) 
    });  
});

的jsfiddle http://jsfiddle.net/guest271314/vhuaen71/

來源

2014-10-10 05:49:50 guest271314

Jquery：是否有一個類似於$（document）.ready（）的基於元素的方法？

回答

相關問題