img对象无限触发onload事件。查了很多不知道怎么办。。

Question

 $("#fileupload").on('change', function(e) {
                        if(e.target.files || e.dataTransfer.files) {
                            var $img = $('<img>');
                            var $goods_imgs = $('.goods_imgs');
                            var $goods_img = $('<div>').addClass('goods_img');
                            
                            $img.attr("src", getObjectURL(this.files[0]));
                            $goods_img.append($img);
                            $goods_imgs.append($goods_img);
          
                            $img.on('load', function() {
                                $img.attr("src", getBase64Image($img.get(0)));
                            });
                        }
                    });
                    
                    
                    
                    好像是说在src改变的时候就会触发onload事件， 但是在onload事件最后已经改变了src。
             

Answer 1

这是jquery嘛？如果是的话jquery有一个只触发一次的 one 方法，第一次load改变了img的src，但因为只触发一次，所以不会再执行。

$img.one('load', function() {
    $img.attr("src", getBase64Image($img.get(0)));
});

Answer 2

图像元素只要设置了src属性后就会开始下载图像。
你这样的写法是图像下载完成后就设置了src属性，于是图片加载，加载完成之后又开始设置src属性，就死循环了
所以把$img.attr("src", getBase64Image($img.get(0)));放到load事件外就行了

Answer 3

这是做 图片预览的 赶脚 ？
$("#fileupload").on('change') 是因为触发 这个吗？
console.log() 多打几个定位， return false 阻止冒泡

Answer 4

$img.on('load', function() {
    $img.attr("src", getBase64Image($img.get(0)));
    $img.off('load')
});