ExtJS 4：當img組件加載大圖像時顯示LoadMask

我需要在單擊按鈕更新Img組件的src屬性期間顯示「Loading image ...」掩碼。ExtJS 4：當img組件加載大圖像時顯示LoadMask

此代碼不能顯示負載面膜：

certImg.setLoading('Loading image...'); 
certImg.setSrc('load_image.php?file_name=' + record.get('invoice_item_file')); 
certImg.setLoading(false);

而這種代碼演出，但不要隱藏負荷面膜（顯示了更新的圖像吧）：

certImg.setLoading('Loading image...'); 
certImg.setSrc('load_image.php?file_name=' + record.get('invoice_item_file'));

我嘗試提高圖像大小高達1-2 Mb，這使得加載3-4秒，但加載掩碼仍然沒有顯示... 我也試過把certImg.setLoading（false）放到img事件後，結果是一樣的。

而當評論「certImg.setLoading（false）;」 - img更新，但仍然顯示img覆蓋img ...

來源

2012-12-19 Allan Stark

你能檢查你的代碼嗎？它正在爲我工作。請參閱示例here。

var isResized = false; 
var changingImage = Ext.create('Ext.Img', { 
    src: 'http://www.sencha.com/img/20110215-feat-html5.png', 
    resizable:true, 
    listeners: { 
    render: function (me) { 
     me.el.on({ 
      load: function (evt, ele, opts) { 
        me.setLoading('Loading Mask Tested'); 
      } 
      }); 
     }, 
     resize:function(me) { 
      alert("resized"); 
      if(isResized) { 
       alert("second time"); 
      me.setSrc('http://www.sencha.com/img/20110215-feat-perf.png'); 
      } else { 
       isResized= true;   
      } 

     }, 

     afterrender: function (me) { 
     me.el.on({ 
      load: function (evt, ele, opts) { 
        alert("rendered"); 
        me.setLoading(false); 
      } 
      }); 
     } 
    } 
    //height:200, 
    //renderTo: Ext.getBody() 
}).render(Ext.getBody());

來源

2012-12-19 17:04:00 srknori

有趣的案例...... 我只是增加了警報到我的代碼，看到了同樣的結果。

certImg.setLoading('Loading image...'); 
certImg.setSrc('load_image.php?file_name=' + record.get('invoice_item_file')); 
alert('now it loading...'); 
certImg.setLoading(false);

但是在您的代碼中，如果您使用大圖像（如3-4 Mb），則在加載圖像時確實無法看到加載掩碼。看起來，加載掩碼顯示後快速加載完成，如果我們不使用警報暫停顯示 - 我們沒有看到它。

我只是試圖去改變我的代碼在你的方式，但採取同樣的結果 - 如果除去比負載面具國防部不會自動顯示警告...

煎茶不提供針對這種情況的任何樣品，可能是它不在此框架中實施。

您必須嘗試下載大圖像而不使用警報來查看此現象。

來源

2012-12-20 07:28:34

ExtJS 4：當img組件加載大圖像時顯示LoadMask

回答

相關問題