Jquery img.load вопрос - PullRequest
Новая
       25

Jquery img.load вопрос

2 голосов
/ 11 июля 2009

Я использую плагин цикла jQuery для циклического перебора некоторых изображений. Все эти изображения содержатся внутри DIV. Я не хочу, чтобы плагин цикла запускался до тех пор, пока не загрузятся все изображения или, по крайней мере, первые 4 или 5, чтобы не появилось изображение, которое еще не загружено. Есть ли простой способ сделать это?

Я попытался добавить класс 'lastImg' к последнему img в div и добавить к нему событие 'load', например, 

Markup
<div id='cycle'>
  <img src=''/>
  <img src=''/>
  <img src='' class='lastImg'/>
</div>

JQuery
    $('lastImg').load(function(){
      $('#cycle').cycle({..});
    });

Это выглядит нормально в Chrome и FF, по общему признанию, это немного ненормально (иногда это не работает, может быть, если изображение находится в кэше?) И совсем не в IE (удивление, удивление ...). 1008 *

Любые другие предложения о том, как я могу это сделать?

Ответы [ 4 ]

3 голосов
/ 11 июля 2009

Markup: 

<div id='cycle'>
  <img src='path1' class='preload' />
  <img src='path2' class='preload' />
  <img src='path3' class='preload'/>
</div>

Попробуйте это: 

var cyclerLoaded = false;
var numberOfPreloaded = 0;

function imageLoaded()
{      
  numberOfPreloaded++;

  if (numberOfPreloaded >= 4 && !cyclerLoaded)
  {
    $('#cycle').cycle({..});
    cyclerLoaded = true;
  }
}

$(document).ready(function()
{      

  $('img.preload').each(function()
  {
    // Get image instance.
    var image = new Image();
    image.src = $(this).attr('src');

    if (image.complete)        
      imageLoaded();        
    else        
      image.onload = imageLoaded;

  });

});

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

3 голосов
/ 12 июля 2009

Почему бы не подключить плагин цикла в событии загрузки документа? Событие загрузки документа срабатывает, когда все документы загружены. [событие готовности срабатывает, когда DOM доступен.]

Попробуйте 

$(document).load(function() { //your cycle plugin hookup } );
2 голосов
/ 11 июля 2009

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

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

0 голосов
/ 12 августа 2010

В вашем коде неправильно то, что вы используете $('lastImg'), но это должно быть $('.lastImg').

Таким образом, ваш код никогда не будет работать вообще.

...