Question

   $.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)
                }

    }

这里是在ajax调用的响应中动态加载一个div id“thumbs”。在这个拇指div旁边有一个图像和提交按钮..问题是提交按钮加载很快但是如果图像很重则需要花费时间载入。如何在图像后加载提交按钮..任何帮助赞赏？

Answer 1

您可以使用.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/

Answer 2

这是我的建议，我使用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);
    }
  }
.
.
.

Jquery - Ajax - 加载图片后显示提交按钮？

2 个答案: