ユーザーが AJAX を介して自分のプロフィール写真を変更できる画像アップロード ダイアログがあります。それはこのように動作します：
1) ユーザーが「写真の更新」アクションをクリックします。
2) ダイアログが開く
3) 現在のプロファイル画像が読み込まれ、「load」イベントがクロッパーの初期化を開始します
4) ユーザーが「新しい写真をアップロード」をクリックする
5) マルチパート アップロードを介して、応答は新しい写真の cdn リンクを含む成功メッセージを返します。
6) 新しい写真の URL は、ダイアログ内の画像の 'src' を置き換えます (以前はユーザーの元のプロファイル画像を保持していたもの)。
6) 新しい写真がロードされ、'load' イベントが発生し、クロッパーが初期化されます。
私たちの開発環境では、これは正常に機能しますが、本番環境では、その 2 番目の「ロード」 (新しい写真イベントが発生した後に発生するもので、クロッパーの初期化の手前で停止します。Charles を使用して JavaScript を再ルーティングしています)ローカル マシンへのリクエストなので、dev と prod は文字通りまったく同じコードを使用して実行されます.唯一の違いは環境です (私が知る限り)。
明確にするために、アップロードはどちらの場合も成功し、アップロードされたばかりの画像にリンクされていることを確認する有効な URL を返します。私が見る限り、唯一の問題は、prod の新しいイメージが「load」イベントを発生させないことです。また、IE9 以外のブラウザーではこのエラーを生成できませんでした。
アイデア？
例:
// How the image load event is bound
$image.on('load', handleImageLoad);
// How the image is being set (src is provided on upload-success):
$image.attr('src', src);
// handleImageLoad is called after image upload in dev, but not in prod
テスト：
理論をテストするために、次のimageEl.completeコードを設定しました。
interval = setInterval(function () {
if ($image[0].complete) {
handleImageLoad();
clearInterval(interval);
}
}, 0);
handleImageLoadにはまだ達していません。