Question

是否有可以应用的类似于$(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');});
        }      
    });

感谢您的建议。

Answer 1

如果您对正在加载的图片特别感兴趣，那么您可以尝试imagesLoaded，这似乎涵盖了您提到的示例案例。

Answer 2

与$（＆＃34;文档＆＃34;）相同.ready（） - 不，但是，有一些方法可以使它工作：

将您需要执行的任何函数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 } })

开启（＆＃39;更改＆＃39;）可以按照您想要的任何方式使用：它可以根据元素的数量触发一个功能，基于内部元素的性质（如果它＆＃39;一个图像，一个链接，另一个div等），你能想到的任何东西。

Answer 3

这些方面应该做你想做的事。

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');
    });
}

Answer 4

尝试

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/

Jquery：是否存在类似于$（document）.ready（）的基于元素的方法？

4 个答案: