0 
   $.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 内には、画像と送信ボタンがあります。問題は、送信ボタンがすばやく読み込まれることですが、画像が重い場合、読み込みに時間がかかることです。画像の後にロードする送信ボタンを作成するにはどうすればよいですか?

4

2 に答える 2

1

これが私の提案です、私は物事を混ぜるのではなく、全体を通して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-01T13:38:20.877 に答える
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/

于 2013-02-01T13:04:39.157 に答える