モーダルウィンドウを使用して、サムネイルに写真を表示しています。
ただし、サイズ変更された写真はモーダル ウィンドウに読み込まれません。
画像の src はもともと私のマークアップにはありませんが、その場で追加してマークアップに追加します。もう一度クリックすると、モーダルに写真が読み込まれます。
コンソールを表示すると、初めて高さと幅を取得できます。2回目は、高さと幅に加えて「画像が読み込まれました」というテキストを取得します。
写真が読み込まれたかどうかを確認し、完了したかどうかを確認してから、残りのコードを実行したいと考えています。ロードされていない場合は、ロードされるまでチェックを続けてから、残りのコードの実行を続けます。
スタック オーバーフローに関する他の記事を読みましたが、どれもうまくいきませんでした。助けてください。
$(document).ready(function() {
function galleryStart ($current) {
var $tImage = $current.find('img');
var fullURL = $tImage.attr('src');
var $dFigure = $('#dialog-media figure .media');
var fullSrcURL = "images/mypicture";
var fullSrcURL = fullURL.replace(".jpg", "_full.jpg");
var image;
function onload () {
console.log(image.height, image.width);
var objHeight = image.height;
var objWidth = image.width;
}
image= new Image();
image.src=fullSrcURL;
if (image.complete) {
console.log('image already loaded to browser');
onload();
} else {
image.onload = onload;
console.log('xxx');
}
$dFigure.append('<img id="dialog-media-object" src="' + fullSrcURL + '" alt="' + $tImage.attr('alt') + '" />');
//Execute more code here once the image has finished loading
//More code to load the image into the modal window
}
$('a.dialog-media').click(function (event) {
event.preventDefault();
$("#dialog").dialog({
height: "auto", //720
width: "auto", //960
draggable: false,
modal: true,
//position: {
// my: "center",
// at: "center",
// of: window },
open: function(event, ui){
galleryStart(tLink);
},
close: function(event, ui){
galleryEnd();
$(this).dialog('destroy').remove();
});
}); // 最後の終了タグ