Загрузка изображений с обратным вызовом - PullRequest
Новая
       46

Загрузка изображений с обратным вызовом

0 голосов
/ 29 января 2012

На странице есть анимация, и, поскольку анимация продолжает воспроизводиться, я хочу предварительно загрузить изображения.

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

Например, я хочу загрузить изображения элементов img:

<img src="image1.png">
<img src="image2.png">
<img src="image3.png">

, а затем несколько изображений, которые установлены в файле CSS: 

.figure1{background-image:url('fig1.png')}
.figure2{background-image:url('fig2.png')}
.figure3{background-image:url('fig3.png')}

Когда все изображения загружены, затем переходите к другой функции.

Пример моей анимации: 

$('#coolanimation').delay(1000).fadeIn("slow", function() {

    // Load images here and when loaded do this:
    $('#intro').fadeOut("slow", function() { $(this).remove();

    });
});

Ответы [ 4 ]

1 голос
/ 29 января 2012

Может быть, вам нужно это http://www.mattfarina.com/2007/02/01/preloading_images_with_jquery

1 голос
/ 29 января 2012

Элементы изображения имеют событие onload. Создайте массив, содержащий URL-адреса всех изображений, которые вы хотите предварительно загрузить (включая загруженные с помощью CSS background-image), создайте для каждого объекта объекты DOM Image и отследите, сколько из них было загружено с помощью счетчика. 

<script>
var imageList = [
  'image1.png',
  'image1.png',
  'image1.png',
  'fig1.png',
  'fig2.png',
  'fig3.png'
],
imageCountdown = imageList.length; 

$(function(){

  $('#coolanimation').delay(1000).fadeIn("slow");

  // No need to wait for the fadeIn to complete before loading images. Get the preloading happening in the background as soon as possible. 
  $.each(imageList, function(index, item){
    var image = new Image(); // creates a DOM Image object

    // Create the onload handler before setting image src. Cached images trigger "onload" as soon as image src is set, so we need to be prepared for that. 
    image.onload = function(){
      // Decrement the image countdown        
      imageCountdown--;

      image.onload = function(){}; // clear the onload handler. Avoids certain bugs in IE

      if (imageCountdown === 0){
        // if imageCountdown is 0, we've loaded all the images. So now go ahead and trigger the animation
        $('#intro').fadeOut("slow", 
          function (){ 
            $(this).remove();
          }
        );
      }
    };

    // Now that we're prepared for the onload, set the image src
    image.src = item;
  });
});
</script>

Можно включить CSS-изображения в этот алгоритм, потому что после их загрузки они будут кэшироваться в памяти и доступны для немедленного использования в любом месте страницы.

0 голосов
/ 20 июня 2012

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

Пользователь делает серию выборов в нашем приложении, которые динамически определяют серию изображений для загрузки - до 5 400x400 пикселей на дюйм. КЛЮЧ здесь - я должен убедиться, что изображения загружены ДО запуска функции. Эта функция не работает, если изображения не были предварительно загружены. Если эта функция не работает, все приложение не работает. Итак, изображения должны быть там.

Код Амит был критически важен для построения нашей функции. Спасибо. Единственное, что я добавил, чтобы сделать его пуленепробиваемым в Safari, - это вставить изображение в DOM. это не работает для меня без этого. У меня есть заполнитель div с прозрачным изображением и его действительным src. В моем случае я знаю, сколько изображений и настроил их заранее, но это можно сделать динамически, прежде чем запускать код для вставки в div.

в html: 

<div id="hideMe">
<img class="theImgs" id="fake1" src="transparent.png"><img id="fake2" src="transparent.png"> etc...
</div>

в JavaScript: 

image.src = item; // insert after this line, the two lines below.

// insert image into the DOM, into a hidden div
$("#fake" + imageCountdown).attr('src', '' + item + '');
0 голосов
/ 29 января 2012

Как насчет использования события window.load? 

$(window).on('load', function () {
    //run your code here
});

Событие загрузки происходит в конце процесса загрузки документа.На этом этапе все объекты в документе находятся в DOM, и все изображения и подкадры завершили загрузку.

Источник: https://developer.mozilla.org/en/DOM/window.onload

Обновление

Насколько я знаю, вы не можете привязать обработчик событий к событию load для background-image с.Это довольно просто для обычных img с: 

//create array of jQuery objects to add to the DOM later
var arr = [$("<img src='/images/1.jpg' />"), $("<img src='/images/2.jpg' />"), $("<img src='/images/3.jpg' />")];
$(function () {

    //add load event handler to each of the jQuery objects in the array
    for (var i = 0, len = arr.length; i < len; i++) {
        arr[i].on('load', myLoadFunction);
    }

    //now when we add our images to the DOM they will be bound so the event handler will fire even if the image loads very quickly
    $('#my-container').append(arr);
});
...