Jquery - Ajax - 加載圖像後顯示提交按鈕？

$.ajax({ 
      type:"GET", 
      url:"<?php echo Yii::app()->request->baseUrl; ?>/admin/"+urlPage+"?t=ajax&img="+$("#image_name").val()+"&w="+ 
       thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis, 
      cache:false, 

      success:function(rsponse) 
      { 
       $("#cropimage1").hide(); 
       $("#thumbs1").html(""); 
       if(th_size == '1'){ 
       $("#thumbs").html("<img src='<?php echo Yii::app()->request->baseUrl; ?>/upload/temporary/thumb/"+rsponse+"?version="+Math.ceil(Math.random()*100)*10+"' /><input type='button' class='save-btn' onclick='refresh();' name='save' value='<?php echo Yii::t(Yii::app()->session["translator"], "Save and continue");?>'>"); 
       $('html, body').animate({ scrollTop: $('#thumbs').offset().top }, 'slow'); 
       document.getElementById("small_image").value =rsponse; 
       //alert(document.getElementById("small_image").value) 
       } 

    }

這裏我加載一個div id「thumbs」動態響應ajax調用。在這個thumbs div有一個圖像並提交按鈕..問題是，提交按鈕快速加載，但如果圖像很重需要時間來加載。我如何使提交按鈕加載後圖像..任何幫助讚賞？Jquery - Ajax - 加載圖像後顯示提交按鈕？

來源

2013-02-01 SHANib

這裏是我的建議，我使用jQuery，而不是整個混合事情

$.ajax({ 
    type:"GET", 
    url:"<?php echo Yii::app()->request->baseUrl; ?>/admin/"+urlPage+"?t=ajax&img="+$("#image_name").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis, 
    cache:false, 
    success:function(rsponse) { 
    $("#cropimage1").hide(); 
    $("#thumbs1").empty(); 
    if(th_size == '1'){ 
     $("#thumbs").html('<img id="thumbImage" src="<?php echo Yii::app()->request->baseUrl; ?>/upload/temporary/thumb/'+rsponse+'?version='+Math.ceil(Math.random()*100)*10+' />'); 
     $("#thumbImage").on("load",function() { 
     $("#thumbs").append('<input id="saveBtn" type="button" class="save-btn" onclick="refresh();" name="save" value="<?php echo Yii::t(Yii::app()->session["translator"], 'Save and continue');?>">'); 
     }); 
     $('html, body').animate({ scrollTop: $('#thumbs').offset().top }, 'slow'); 
     $("#small_image").val(rsponse); 
    } 
    } 
. 
. 
.

來源

2013-02-01 13:38:20 mplungjan

您可以使用圖像對象的.onload。

的代碼會像下面：

var img = new Image(); 
img.onload = function(){ 
    $("#thumbs").append(img).append("<input type='button' class='save-btn' onclick='refresh();' name='save' value='<?php echo Yii::t(Yii::app()->session["translator"], "Save and continue");?>'>"); 
}; 
img.src = '<?php echo Yii::app()->request->baseUrl; ?>/upload/temporary/thumb/"+rsponse+"?version="+Math.ceil(Math.random()*100)*10+"';

我不運行此代碼，如有錯誤請指出來，因爲它包含PHP代碼的價值。

但是設置src和onload正是這樣使用的。

這是一個簡單的jsfiddle。 http://jsfiddle.net/U7nYb/2/

來源

2013-02-01 13:04:39 pktangyue

是的，你不能在功能 – mplungjan

@mplungjan之前設置src請看看我的更新後，檢查的jsfiddle。 – pktangyue

你必須設置src AFTER設置onload！ http://jsfiddle.net/mplungjan/jDdrP/ – mplungjan

Jquery - Ajax - 加載圖像後顯示提交按鈕？

回答

相關問題