Событие jQuery.load (function () {}) не работает в коллаб с .get ()? - PullRequest
Новая
       14

Событие jQuery.load (function () {}) не работает в коллаб с .get ()?

0 голосов
/ 31 октября 2010

Итак, у меня есть скрипт на веб-сайте, над которым я работаю, который в основном загружает изображения из базы данных и помещает их в div. Когда все изображения загружены, я хочу, чтобы он запускал плагин скроллера (smoothdivscroll). Но я не могу найти способ заставить последнюю часть работать.

Вот код: 

$.get("pages/photosgigs.php", { gig: $(this).attr("id")}, function(data) {
    $('#makeMeScrollableGall').html(data)
    $(window).load( function() {
        $("#makeMeScrollableGall").smoothDivScroll();
        resize();
    });
});

php-скрипт на photosgigs.php возвращает простое <img class="photo" src="..." />. Я также попробовал его с $("img.photo").load(), который, хотя я знаю, что он будет срабатывать при загрузке первого изображения, также не работает. Также пробовал $("#makeMeScrollableGall").load(), тоже не работает.

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

Или я просто умственно отсталый и делаю что-то не так?

1 Ответ

1 голос
/ 31 октября 2010

Во-первых, window.onload редко бывает тем, что вам здесь нужно.Событие onload запускается один раз , когда загружается страница first , оно не запускается снова ... поэтому в настоящее время вы добавляете прослушиватель для события, которое уже было запущено и выигралоне стрелять снова.Вместо этого используйте событие load на изображении и и убедитесь, что оно еще не запущено (что может произойти, если оно загружается из кэша).

Эти изменения будут выглядеть следующим образом: 

$.get("pages/photosgigs.php", { gig: $(this).attr("id") }, function(data) {
  //load data, find the photo we just added
  $('#makeMeScrollableGall').html(data).find('img.photo').load(function() {
    //when the load event fires for the image, run this
    $("#makeMeScrollableGall").smoothDivScroll();
    resize();
  //loop through the loaded images (just one) but this is easier
  }).each(function() { 
     //if the image was already loaded (cached) fire the load event above
     if(this.complete) $(this).load(); 
  });
});

.complete проверяет, загружено ли уже изображение, и запускает ли он наш обработчик событий, связанный с вызовом .load() (ярлык для .trigger('load")).

...