Question

我正在使用模态窗口在缩略图上显示图片但是，调整大小的照片未加载到模态窗口中。

图像的src最初不在我的标记中，但我通过动态附加它将其添加到标记中。我第二次点击它，pic在模态中加载。

查看控制台时，我可以第一次获得高度和宽度。第二次我得到高度和宽度加上“图像加载”文本。

我想检查照片是否已加载以及是否已完成，然后执行其余代码。如果未加载，则继续检查直到加载，然后继续执行其余代码。

我已经阅读了有关堆栈溢出的其他文章，但没有一篇对我有用。可以请一些帮助。

 $(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();


});

}）; //最终结束标记

Answer 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;

Answer 2

只需使用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));

在执行其他代码之前完成加载图像

2 个答案: