jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery回调在dom中的所有图像加载?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
如何在DOM中的所有图片加载时触发事件?
我已经google了很多。我发现这个,但它似乎不工作:

jQuery event for images loaded

解决方法

对窗口使用 load()(docs)方法
$(window).load(function() {
    // this will fire after the entire page is loaded,including images
});

或者直接通过window.onload

window.onload = function() {
    // this will fire after the entire page is loaded,including images
};

如果您想要为每个图像触发单独的事件,请在每个图像上放置一个.load()。

$(function() {
    $('img').one('load',function() {
        // fire when image loads
    });
});

或者如果有可能缓存图片,请执行以下操作:

$(function() {
    function imageLoaded() {
       // function to invoke for loaded image
    }
    $('img').each(function() {
        if( this.complete ) {
            imageLoaded.call( this );
        } else {
            $(this).one('load',imageLoaded);
        }
    });
});

编辑:

为了在最后一个图像加载后执行一些操作,请使用在图像总数设置的计数器,并在每次调用加载处理程序时递减计数。

当它达到0时,运行一些其他代码

$(function() {
    function imageLoaded() {
       // function to invoke for loaded image
       // decrement the counter
       counter--; 
       if( counter === 0 ) {
           // counter is 0 which means the last
           //    one loaded,so do something else
       }
    }
    var images = $('img');
    var counter = images.length;  // initialize the counter

    images.each(function() {
        if( this.complete ) {
            imageLoaded.call( this );
        } else {
            $(this).one('load',imageLoaded);
        }
    });
});

大佬总结

以上是大佬教程为你收集整理的jquery回调在dom中的所有图像加载?全部内容,希望文章能够帮你解决jquery回调在dom中的所有图像加载?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。