官方的方式来要求jQuery等待所有图像加载之前执行的东西



jquery.js (7)

在jQuery中,当你这样做时:

$(function() {
   alert("DOM is loaded, but images not necessarily all loaded");
});

它等待DOM加载并执行您的代码。 如果所有的图像都没有加载,那么它仍然会执行代码。 这显然是我们想要的,如果我们正在初始化任何DOM的东西,如显示或隐藏元素或附加事件。

假设我想要一些动画,并且我不希望它在所有图像加载之前运行。 在jQuery中有没有官方的方法来做到这一点?

我最好的办法是使用<body onload="finished()"> ,但我不想那么做,除非必须这样做。

注意:Internet Explorer 中存在jQuery 1.3.1中的一个错误,它在执行$function() { }代码之前确实等待所有图像加载。 因此,如果您使用该平台,您将获得我正在寻找的行为,而不是上述正确的行为。

https://ffff65535.com


$(window).load()仅在第一次加载页面时起作用。 如果你正在做动态的东西(例如:点击按钮,等待一些新的图像加载),这是行不通的。 为了达到这个目的,你可以使用我的插件:

Demo

Download

/**
 *  Plugin which is applied on a list of img objects and calls
 *  the specified callback function, only when all of them are loaded (or errored).
 *  @author:  H. Yankov (hristo.yankov at gmail dot com)
 *  @version: 1.0.0 (Feb/22/2010)
 *  http://yankov.us
 */

(function($) {
$.fn.batchImageLoad = function(options) {
    var images = $(this);
    var originalTotalImagesCount = images.size();
    var totalImagesCount = originalTotalImagesCount;
    var elementsLoaded = 0;

    // Init
    $.fn.batchImageLoad.defaults = {
        loadingCompleteCallback: null, 
        imageLoadedCallback: null
    }
    var opts = $.extend({}, $.fn.batchImageLoad.defaults, options);

    // Start
    images.each(function() {
        // The image has already been loaded (cached)
        if ($(this)[0].complete) {
            totalImagesCount--;
            if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
        // The image is loading, so attach the listener
        } else {
            $(this).load(function() {
                elementsLoaded++;

                if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);

                // An image has been loaded
                if (elementsLoaded >= totalImagesCount)
                    if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
            });
            $(this).error(function() {
                elementsLoaded++;

                if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);

                // The image has errored
                if (elementsLoaded >= totalImagesCount)
                    if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
            });
        }
    });

    // There are no unloaded images
    if (totalImagesCount <= 0)
        if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
};
})(jQuery);

使用imagesLoaded PACKAGED v3.1.8(最小化时为6.8 Kb)。 这是相对较旧的(自2010年以来),但仍然活跃的项目。

你可以在github上找到它: https://github.com/desandro/imagesloadedhttps://github.com/desandro/imagesloaded

他们的官方网站: http://imagesloaded.desandro.com/ : http://imagesloaded.desandro.com/

为什么它比使用更好:

$(window).load() 

因为您可能想要动态加载图像,如下所示: jsfiddle

$('#button').click(function(){
    $('#image').attr('src', '...');
});

对于那些希望获得在$(window).load激活后获取请求的单个图像的下载完成通知的用户,可以使用图像元素的load事件。

例如:

// create a dialog box with an embedded image
var $dialog = $("<div><img src='" + img_url + "' /></div>");

// get the image element (as a jQuery object)
var $imgElement = $dialog.find("img");

// wait for the image to load 
$imgElement.load(function() {
    alert("The image has loaded; width: " + $imgElement.width() + "px");
});

我会建议使用imagesLoaded.js JavaScript库。

为什么不使用jQuery的$(window).load()

作为ansered在https://.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951

这是一个范围问题。 imagesLoaded允许您定位一组图像,而$(window).load()定位所有资源 - 包括所有图像,对象,.js和.css文件,甚至是iframe。 最有可能的是,imagesLoaded会比$(window).load()更早触发,因为它定位的是一组较小的资产。

使用图片加载的其他很好的理由

  • 正式由IE8 +支持
  • 许可证:MIT许可证
  • 依赖关系:无
  • 体重(缩小和gzipped):7kb缩小(轻!)
  • 下载建设者(有助于减肥):没有必要,已经很小
  • 在Github上:是的
  • 社区和贡献者:相当大,超过4000个成员,尽管只有13个贡献者
  • 历史和贡献:稳定相对较旧(自2010年起),但仍然是活跃的项目

资源


我的解决方案与类似。 以jQuery函数书写:

$.fn.waitForImages = function (callback) {
    var $img = $('img', this),
        totalImg = $img.length;

    var waitImgLoad = function () {
        totalImg--;
        if (!totalImg) {
            callback();
        }
    };

    $img.each(function () {
        if (this.complete) { 
            waitImgLoad();
        }
    })

    $img.load(waitImgLoad)
        .error(waitImgLoad);
};

例:

<div>
    <img src="img1.png"/>
    <img src="img2.png"/>
</div>
<script>
    $('div').waitForImages(function () {
        console.log('img loaded');
    });
</script>

迄今没有任何答案给出了似乎是最简单的解决方案。

$('#image_id').load(
  function () {
    //code here
});





jquery