Завершите загрузку изображения перед выполнением другого кода

0

Я использую модальное окно для отображения изображений, когда они находятся на миниатюре.
Однако измененное изображение не загружается в модальное окно.

Первоначально src изображения не находится в моей разметке, но я добавляю его в разметку, добавляя его на лету. Я нажимаю на него второй раз, пик загружается в модальном режиме.

При просмотре консоли я могу получить высоту и ширину в первый раз. Во второй раз я получаю высоту и ширину плюс текст "загружен образ".

Я хочу проверить, загружена ли фотография, и если она завершена, а затем выполните оставшуюся часть кода. Если он не загружен, продолжайте проверку, пока он не будет загружен, а затем продолжите выполнение для остальной части кода.

Я прочитал другие статьи о переполнении стека, но ни один из них не работал для меня. Может кто-то, пожалуйста, помогите.

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


});

}); // заключительный тег закрытия

  • 0
    В этом - $('#dialog-media figure .media'); что такое figure ? Должно ли это быть $('#dialog-media-figure .media'); вместо?
  • 0
    @Archer - figure - это новый тег HTML5.
Показать ещё 2 комментария
Теги:
image
caching
onload

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;
Поделиться
  • 0
    Я помещаю остальную часть кода в функцию onLoadHandler, чтобы поставить выполнение для остальной части кода после загрузки изображения?
  • 0
    Если выполнение вашего кода зависит от доступности образа, тогда ДА, вам нужно поместить этот код в функцию onload (или, по крайней мере, запустить его оттуда).
Показать ещё 2 комментария
0

Просто создайте элемент DOM с помощью jQuery:

(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));
Поделиться
  • 0
    Я не согласен с этим ответом, но для чего-то такого прямолинейного, функция jQuery - такая огромная нагрузка, что я бы предпочел простой подход JS.
  • 0
    Ну, у вас может быть смысл, если мы говорим о тысячах изображений. Но даже если бы мы это сделали, DOM API попрощался бы, прежде чем JS даже заметит перегрузку. Кстати, ваше решение создает 2 экземпляра изображения.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню