Вызов функции после .load (Jquery) - PullRequest
Новая
       10

Вызов функции после .load (Jquery)

11 голосов
/ 28 марта 2012

С небольшими трудностями при получении функции для вызова после .load: 

$(function(){
    $('a.pageFetcher').click(function(){
        $('#main').load($(this).attr('rel'));
    });
});

Страница загружается, но функции не запускаются: 

$(function(){
    var $container = $('#container');
    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.box',
    });
});
$container.infinitescroll({
    navSelector  : '#page-nav',
    nextSelector : '#page-nav a',
    itemSelector : '.box',
    loading: {
        finishedMsg: 'Nothing else to load.',
        img: 'http://i.imgur.com/6RMhx.gif'
    }
},
function( newElements ) {
    $.superbox.settings = {
        closeTxt: "Close this",
        loadTxt: "Loading your selection",
        nextTxt: "Next item",
        prevTxt: "Previous item"
    };
    $.superbox();
    var $newElems = $( newElements ).css({ opacity: 0 });
    $newElems.imagesLoaded(function(){
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true ); 
    });
}
);
});

У меня естьпопытался объединить их так, чтобы 2-ые функции вызывались после .load (после некоторого поиска на этом сайте и просмотра заданных ответов / примеров), но, похоже, ничего не работает должным образом.

Предложения?

Ответы [ 3 ]

29 голосов
/ 28 марта 2012

Чтобы запустить некоторый код после завершения .load(), вам нужно поместить код в функцию завершения для .load(). Операция загрузки является асинхронной, поэтому функция загрузки начинает загрузку содержимого, а затем сразу же возвращается, и выполнение JS продолжается (до завершения загрузки). Так что, если вы пытаетесь работать с недавно загруженным контентом, его там еще не будет.

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

Вот почему .load() принимает в качестве аргумента функцию завершения. Это функция, которая будет вызываться после завершения загрузки. См. соответствующий jQuery .load() документ для получения дополнительной информации. Вот как будет выглядеть ваш код с функцией завершения. 

$(function(){
    $('a.pageFetcher').click(function(){
        $('#main').load($(this).attr('rel'), function() {
            // put the code here that you want to run when the .load() 
            // has completed and the content is available
            // Or, you can call a function from here
        });
        // the .load() operation has not completed here yet
        // it has just been started
    });
});
1 голос
/ 24 октября 2017

Вы также можете использовать кнопку загрузки начальной загрузки для запуска .load () и функции после .load ()

HTML 

<button type="button" class="btn btn-primary btn-lg" id="refresh" data-loading-text="<i class='fa fa-spinner fa-spin '></i>Processing">Reload Emails</button>

JQUERY 

 $("#refresh").click(function() {

    var $this = $(this);
    $this.button('loading');

    $("#container").load("/showemails.aspx?page=1 #container", function() {
         $("#refresh").button('reset');
      });

     return false;
  });
1 голос
/ 28 марта 2012

Ваша первая точка отсчета всегда должна быть jQuery API , вот что страница API на .load () сообщает вам о параметрах, которые принимает функция загрузки:

.load (обработчик (eventObject))

.load ([eventData], обработчик (eventObject))

В этом случае вы передаете $(this).attr('rel') в качестве eventData, поэтому вы добавляете обработчик событий после , что: 

$('#main').load($(this).attr('rel'), onNewMainContent);

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

function onNewMainContent {  // new
  var $container = $('#container');
  $container.imagesLoaded(function(){
    $container.masonry({
      itemSelector: '.box',
  // ...
...