我如何使jQuery语句在.load（）之后执行？

Question

对不起，标题可能很糟糕。 我不知道该怎么说。 请提供建议。

Anyhoo，我有这个html：

<ul class="image_reel">
<li class="thin"><a href="#" rel="img14" title="Click to view"><img   class="gal_thumb" src="8681.jpg"></a></li>
<li class=""><a href="#" rel="img0" title="Click to view"><img class="gal_thumb" src="DSC_7586.jpg"></a></li>
<li class="thin"><a href="#" rel="img2" title="Click to view"><img class="gal_thumb" src="DSC_7601.jpg"></a></li>
</ul>

我想根据子img的高度为li分配一个'thick'或'thin'类。 所以我有这个jQuery：

 // add 'thin' class to parent li
 jQuery('.image_reel li a img').load( 
    function() {
            var t = jQuery(this);
            var h = this.naturalHeight;
            if( h < 800 ) {
                jQuery(t).parent().parent().addClass( 'thin' );
            }
 });                    

 // now sort lis
 var $images = jQuery('.image_reel');
 var $imagesli = $images.children('li');
 $imagesli.sort(function(a,b){
        var aT = jQuery(a).hasClass('thin');
        var bT = jQuery(b).hasClass('thin');
        if( aT == true && ( bT == false )  )
            return 1;
        else
            return 0;
 });
 $imagesli.detach().appendTo($images);       

问题似乎是第一个块似乎在第二个块之后执行。 还是它们同步执行？ 无论如何，该代码不起作用。 那么...如何使第一段代码在第二段之前执行？

奇怪的是，如果我使用Firefox“ Q”调试器，则代码实际上“有效”。 但是没有调试器就没有。 我假设调试器会强制代码以某种特殊顺序运行。

Answer 1

将您的section块包装到一个函数中，然后在load函数结束后调用它，就像将它放在return中一样

// add 'thin' class to parent li
jQuery('.image_reel li a img').load(function() {
    var t = jQuery(this);
    var h = this.naturalHeight;
    if( h < 800 ) {
        jQuery(t).parent().parent().addClass( 'thin' );
    }
    return loadBlock();
});                    

function loadBlock() {
    // now sort lis
    var $images = jQuery('.image_reel');
    var $imagesli = $images.children('li');
    $imagesli.sort(function(a,b){
        var aT = jQuery(a).hasClass('thin');
        var bT = jQuery(b).hasClass('thin');
        if( aT == true && ( bT == false ) ) {
            return 1;
        } else {
            return 0;
        }
    });

    $imagesli.detach().appendTo($images);       
}

或使用异步 .waterfall或.series类的包

---

您可以使用如上所述的异步之类的东西来更好地控制异步功能，这是一个示例，该示例说明了如何避免每次回调都调用

async.each($("img"), function(e, callback) {
   $(this).load(function() {
      console.log("bdbdbd");
      callback(); // Done loading image
   });
}, function() {
   console.log("Done loading images");
   loadBlock();
});

如果使用得当，异步包可以并且将是您最好的朋友。

我在移动设备上，因此我无法真正进行测试，但这在jsbin上工作得很好，只是将您的代码放在那里，它应该可以工作。

之所以有效，是因为当您调用jQuery('.image_reel li a img').load它将在找到的每个元素上运行自己的循环，并将事件侦听器附加到它。

我使用的方法是async.each ，它使用一个数组，在这种情况下，我提供$（'＃img'）作为数组，它将是它找到的与查询匹配的任何元素的集合，然后async.each将并行运行循环，这样我们就不必等到循环结束就可以继续进行下一个操作。

然后在循环主体中，我们在.this上调用.load ，这是一次将.load函数仅附加到一个元素上，并且不尝试对所有元素进行自己的内部循环，因此当函数完成时，我们知道它的完成原因是该功能仅在元素上运行。 然后我们调用callback(); 这是async.each使.each知道函数体已完成并且可以继续进行所必需的，当所有循环触发其callback ，循环结束，然后执行主函数（该函数是.each的第三个参数）。 您可以在此处查看有关async.each的更多信息： async.each

Answer 2

第二个块在第一个块之前执行，因为load()立即解析，并且仅在完成后才调用第一个块。 要执行所需的操作，请在第一个程序段的末尾调用第二个程序段。

// add 'thin' class to parent li
 jQuery('.image_reel li a img').load( 
    function() {
            var t = jQuery(this);
            var h = this.naturalHeight;
            if( h < 800 ) {
                jQuery(t).parent().parent().addClass( 'thin' );
            }
            doWork();
 });                    

function doWork() {
 // now sort lis
 var $images = jQuery('.image_reel');
 var $imagesli = $images.children('li');
 $imagesli.sort(function(a,b){
        var aT = jQuery(a).hasClass('thin');
        var bT = jQuery(b).hasClass('thin');
        if( aT == true && ( bT == false )  )
            return 1;
        else
            return 0;
 });
 $imagesli.detach().appendTo($images); 
}