0

モーダルウィンドウを使用して、サムネイルに写真を表示しています。
ただし、サイズ変更された写真はモーダル ウィンドウに読み込まれません。

画像の 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();


});

}); // 最後の終了タグ

4

2 に答える 2

1

画像の onload イベントを次のように使用できます。

image= new Image();
image.onload = onLoadHandler;
image.src=fullSrcURL;

function onLoadHandler() {
    alert("Image is loaded!");
}

注:ソースを割り当てる前に、onLoadHandlerを に割り当てることが重要です。image.onload

したがって、あなたの場合、image.completeステートメント全体をスキップして、次のようにします。

var $dFigure = $('#dialog-media figure .media');
var fullSrcURL = "images/mypicture"; 
var image;

function onload () {
  console.log(image.height, image.width);
  var objHeight = image.height;
  var objWidth = image.width;
  $dFigure.append('<img id="dialog-media-object" src="' + fullSrcURL + '" alt="' + $tImage.attr('alt') + '" />');
}

image= new Image();
image.onload = onload;
image.src=fullSrcURL;
于 2013-10-03T18:58:14.060 に答える
0

jQuery で DOM 要素を作成するだけです。

(function($){
    $(function () {
        // create image
        $('<img>')
            // add onLoad handler
            .load(whenImageIsLoadedFunction)
            // set the images 'src'
            .attr('src', 'your/image/source.png');
    });

    function whenImageIsLoadedFunction() {
        // do all your code here.
        $(this).appendTo('#imageContainer');
    }
}(jQuery));
于 2013-10-03T19:05:42.413 に答える