是否有类似`$（window）.load（）;`在新插入的Ajax内容加载完成后执行一个函数？ [英] Is there something similar to `$(window).load();` for executing a function after newly inserted Ajax content has finished loading?

问题描述

在我做一个简单的事情，例如 $（element）.load（url，callback）; 之后，页面上会有新的内容包含图像等等。

是否有类似于 $（window）.load（callback）的方法新内容已经完成加载？

$（window）.load（）; 新鲜的，所以你可以显示一个加载动画，直到所有的内容被加载，但是当内容被加载到 $（window）.load（）已被触发。

编辑6/6/12 11:55 pm：我想每个人都会误解我的问题。让我解释一下：

当你第一次加载一个页面时，你可以利用jQuery来利用这两个事件： $（document） .ready（）; 和 $（window）.load（）; 。第一个在DOM准备就绪时触发，第二个在内容加载完成时触发（图像等）。使用jQuery的 .load（）方法更新页面后，我完全意识到我可以传递一个回调以在Ajax完成后执行。

这就是不是我想要的。我想在新内容完成加载后执行一个函数，类似于在页面之后触发 $（window）.load（）; 初始内容已完成加载。

这有意义吗？我们如何创建一个类似于 $（window）.load（）; 的事件来完成加载Ajax的内容（ not 在插入HTML之后）？

解决方案

根据jQuery：

当它和所有的子元素被完全加载时，加载事件被发送到一个元素。这个事件可以发送到任何与URL相关的元素：图像，脚本，框架，iframe和窗口对象。

，在DOM更新后（例如使用Ajax内容），我为所有新插入的图像上的加载事件设置了一个侦听器：

 函数when_images_loaded（$ img_container，callback）{//当$ img_container（jQuery对象）中的图像加载时执行回调。仅当$ img_container中的所有图像都是新插入的图像时才可用，并且在将图像插入目标后立即调用此函数。 
 var _imgs = $ img_container.find（'img'），
 img_length = _imgs.length，
 img_load_cntr = 0; 
 
 if（img_length）{//如果$ img_container包含新图像。 
 _imgs.on（'load'，function（）{//然后我们避免回调直到图像被加载
 img_load_cntr ++; 
 if（img_load_cntr == img_length）{
 callback （）; 
} 
}）; 
} 
 else {//如果$ img_container中没有图像，则只执行主回调操作。 
 callback（）; 
 
 
 code 
 $ b $ p 
 $ b 
这对于允许内容保持隐藏直到图像准备好了。如果你有背景图像，将显示为背景图像，这是行不通的。解决方法是将您在CSS样式中使用的所有图像加载到保持隐藏状态的容器中，以便上述功能允许您加载图像。加载完所有图片后，您可以移除包含仅限CSS的图片的元素，这样，当您取消隐藏内容时，浏览器会立即呈现背景（等）。
 
After I make an ajax request by doing something simple like $(element).load(url, callback); there will be new content on the page that includes images and such.

Is there a way to do something similar to $(window).load(callback) after the new content has finished loading?

$(window).load(); works nicely when the page is fresh so that you can show a load animation until all content is loaded, but something simple like this seems to be missing for when content is loaded after $(window).load() has already been triggered.

EDIT 6/6/12 11:55pm: I think everyone is misunderstanding my question. Let me explain a little better:

When you first load a page, you can take advantage of these two events with jQuery: $(document).ready(); and $(window).load();. The first one fires when the DOM is ready and the second one fires when content is done being loaded (images, etc). After updating the page using jQuery's .load() method, I am fully aware that I can pass a callback to be executed after the Ajax is completed.

That is not what I want. I want to execute a function after the new content is finished loading, similar to when $(window).load(); fires after a page's initial content has finished loading.

Does that make sense? How can we create an event similar to $(window).load(); for doing stuff after Ajax'ed content is done loading (not just after the HTML has been inserted)?
解决方案
According to jQuery:

  
The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.
So, after the DOM has been updated (with Ajax'ed content for example), I am setting a listener for the 'load' events on all newly inserted images:
function when_images_loaded($img_container, callback) { // do callback when images in $img_container (jQuery object) are loaded. Only works when ALL images in $img_container are newly inserted images and this function is called immediately after images are inserted into the target.
    var _imgs = $img_container.find('img'),
        img_length = _imgs.length,
        img_load_cntr = 0;

    if (img_length) { //if the $img_container contains new images.
        _imgs.on('load', function() { //then we avoid the callback until images are loaded
            img_load_cntr++;
            if (img_load_cntr == img_length) {
                callback();
            }
        });
    }
    else { //otherwise just do the main callback action if there's no images in $img_container.
        callback();
    }
}
This is nice for allowing content to remain hidden until images are ready. If you have background images that will be showing as background images, this won't work. A workaround would be to load all the images that you are using in your CSS styles into a container that will remain hidden so that the above function will allow you to load the images. Once all the images are loaded, you can remove the element that contains your CSS-only images and that way the browser will render backgrounds (etc) instantaneously when you unhide your content.

                        
这篇关于是否有类似`$（window）.load（）;`在新插入的Ajax内容加载完成后执行一个函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！