الحدث Onload Image الذي يؤدي قبل تحميل صورته بالكامل؟

Question

أنا أستخدم المكون الإضافي jcrop jQuery ، وأشغل initJcropBox() وظيفة في حدث Onload.

ولكن يتم تشغيل هذه الوظيفة قبل تحميل الصورة بالكامل. وهو ما يسبب مشكلة. مثل إظهار حجم غير صحيح من JCROPBOX أو عدم عرض JCROPBOX على الإطلاق.

عندما أضع خطًا ، يعمل بشكل جيد. ولكن ليس حلا. setTimeout('initJcropBox()',2000);

كيف يمكنني تشغيل initJcropbox() الوظيفة بعد الصورة محملة/عرض بالكامل في المتصفح؟

  var api;

     function initJcropBox(){
      api = $.Jcrop('#cropbox',{
          bgColor: 'black',
          bgOpacity: .7,
          onSelect: updateCoords,
          onChange: updateCoords,
          boxWidth: 400
      });
        api.animateTo([0,0,$('#cropbox').width(),$('#cropbox').height()]);
    }     

    function insertImage(name) {
        var img = new Image();
        img.onload = initJcropBox;
        img.src = name;
        img.id = 'cropbox';

        return img;
    }

$('td.imageFile').live('click', function(e){
    fileWithPath = "uploads/original/" + $(this).text();
    $('#cropbox').remove();
    $("#cropcontainer").empty().html(insertImage(fileWithPath));
});

Answer 1

فقط جوجل ، أنا فرز هذه المشكلة بنفسي. هنا هو حل العمل

function insertImage(name) {

  var img = new Image();
  img.id = 'cropbox';
  img.src = name;

  if(img.complete) setTimeout('initJcropBox()', 500);   
  else onload= initJcropBox;  

  return img;
 }

Answer 2

حاول استبدالك insertImage(name) تعمل مع ذلك. هذا يجب أن يؤدي إلى حدث الحمل على الصورة حتى يتم تحميله حقًا.

function insertImage(name) {
    var img = $('<img id="cropbox" />');
    img.load(function(){ 
                if (! this.complete) {
                  return false;
                  $(this).load();
                }

                else if (typeof this.naturalWidth != 'undefined' && this.naturalWidth == 0) {
                  return false;
                  $(this).load();
                }
                else
                  initJcropBox();
             })
        .attr('src',name);
    return img;
}

لم أختبرها ، لذلك اسمحوا لي أن أعرف ما إذا كان الأمر يستحق.

Answer 3

منذ بعض الوقت كان لدي قضية مماثلة. استخدم load () لتحميل الصورة ولإطلاق وظيفة رد الاتصال. هنا مزيد من التفاصيل.