jquery blockui 几个任务

Question

我想这可能很明显，但我对前端相当菜鸟。
场景如下：每当用户点击一个按钮，我需要
1-通过blockUI
屏蔽页面 2-清除一些东西
3-加载一些东西
4-解锁页面
让有一个片段，类似于我目前的做法：

function reload_data()
{
 //block
 $.blockUI({ message: $('#spinner_div') , css: { top: '50%' , left:'50%' , border:'none'} }); 
 
 //clear stuff
 $('#my_kpi'  ).text(''); //this empty an anchor
 $('#my_report iframe').attr('src',''); //this empty an iframe
 
 //load stuff
 $('#my_kpi'  ).text('loaded');   //this sets an anchor
 $('#inf_prioridad_estado iframe').attr('src','foo.php'); //this loads an iframe
 
 
 //unblock
 setTimeout(function(){ alert("I would like not to unblock until iframes are loaded");},2000);
 setTimeout($.unblockUI, 2000); //will be blocked unless for 2 seconds
 console.log('unblocked');
 
}

我知道（这么想...）发生了什么，但我不知道如何解决：
$().attr('src','foo.php');确实执行了，但在实际加载 iframe 之前继续执行下一条语句。
有什么想法吗？
非常感谢！

Answer 1

设置 iframe 的 src 属性后，您需要监听加载事件：

// Set number of frames to be loaded
// This could be done with a jquery selector getting iframe count
var framesToLoad = 2;

function tryUnblockUI() {
  // Frame loaded, decrement framesToLoad count
  framesToLoad--;

  // Once all frames are loaded, unblock UI
  if (frameLoadingCount === 0) {
    //unblock ui here
  }
}

// Load frame 1
$('#inf_prioridad_estado iframe')
  .attr('src', 'foo.php')
  .on('load', tryUnblockUI);

// Load frame 2
$('#inf_prioridad_estado_2 iframe')
  .attr('src', 'foo.php')
  .on('load', tryUnblockUI);

jquery blockui 几个任务

jquery blockui several tasks

iframe

jquery

blockui