Jquery:是否有类似于$(document）.ready(）的基于元素的方法

Jquery: Is there an element based method similar to $(document).ready()?

本文关键字：于元素 方法 元素 ready document 是否 类似于 Jquery      更新时间：2023-09-26

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

谢谢你的建议。

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

与$（"document"）.ready（）相同--不，但是，有一些方法可以使其工作：

  1. 将需要执行的任何函数作为callback放入AJAX调用：

    $.get("link.php?item=1", function() { //callback function here })

  2. 您可以有一个onchange事件侦听器，它在div被更改时触发，并且您可以在加载一定数量的元素后专门触发一个函数：

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

on（'change'）可以用任何你想要的方式：它可以根据元素的数量、内部元素的性质（如果是图像、链接、另一个div等）以及你能想到的任何东西触发函数。

沿着这些线的某些东西应该可以做你想做的事。

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

尝试

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

jsfiddlehttp://jsfiddle.net/guest271314/vhuaen71/

相关文章：