图像加载事件在图像完全加载之前触发? [英] image onload event triggering before its image fully loaded?

问题描述

我正在使用Jcrop jquery插件，并在onload事件上触发initJcropBox()函数.

I am using Jcrop jquery plugin, and triggering the initJcropBox() function on onload event.

，但是此功能在图像完全加载之前被触发.这引起了问题.例如显示jcropbox大小不正确或根本不显示jcropbox.

but this function is being triggered before the image is fully loaded. which is causing problem. such as showing incorrect size of jcropbox or not showing jcropbox at all.

当我放置一条线时，它工作正常.但这不是解决方案. setTimeout('initJcropBox()',2000);

when i place a line, it works fine. but is not a solution. setTimeout('initJcropBox()',2000);

在浏览器中完全加载/渲染图像后，如何触发initJcropbox()功能?

How can I trigger initJcropbox() function after image is fully loaded/rendered in the browser?

  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));
});

推荐答案

只需对它进行谷歌搜索，我自己就可以解决此问题.这是可行的解决方案

Just google it, I sort this problem myself. here is the working solution

function insertImage(name) {

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

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

  return img;
 }

这篇关于图像加载事件在图像完全加载之前触发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！