Как я могу использовать JS или jQuery для запуска функции на элементах DOM, так как они загружаются лениво? - PullRequest
Новая
       20

Как я могу использовать JS или jQuery для запуска функции на элементах DOM, так как они загружаются лениво?

0 голосов
/ 02 апреля 2020

Я использую этот базовый c интервал и обратный вызов для запуска функции, когда существует определенный элемент DOM. 

function ready(elem, callback) {
    let loaded = setInterval(function(){
        if ( document.querySelectorAll(elem).length ) {
            clearInterval(loaded);
            callback();
        }
    }, 100);
}

ready('elem', function(){
    //code here
});

Теперь мне нужен способ запуска функции для элементов один за другим, так как они lazyload в ДОМ. Когда я прокручиваю страницу вниз, ленивая загрузка изображений с поддельным атрибутом sr c выглядит следующим образом: <img src="/blank.jpg">. Затем сценарий, который у меня не контролируется, запускается, и sr c настраивается на фактическое изображение. Итак, мне нужен скрипт для ожидания существования этих ленивых загруженных изображений, ТОЧЕ ждите, чтобы источник больше не был поддельным.

Я знаю, что sr c больше не является поддельным, когда он содержит определенную подстроку - пример "foo": <img src="/imgnamefoo.jpg">. Я знаю, сколько изображений должно попасть на страницу, потому что я получаю количество из глобального объекта. Кроме того, у изображений есть идентификаторы, которые нумеруются (id = "someid_1"), но я предпочитаю не полагаться на это, как в настоящее время. Мой текущий метод заключается в ожидании существования последнего изображения, проверяет подстроку на этом изображении, а затем запускает функцию на всех изображениях одновременно. Тем не менее, я хотел бы запускать его по мере появления изображений, чтобы меньше задержек, дающих пользователю возможность полностью прокрутить изображение до последнего изображения. К ним просто обращаются по мере их появления.

Мой текущий код, ожидающий существования последнего изображения: 

window.quantity = object.images.length;

function ready(elem, callback) {
    let loaded = setInterval(function(){
        var src = document.querySelectorAll(elem)[0].getAttribute('src');
        if ( src.indexOf('foo') !== -1 ) {
            clearInterval(loaded);
            callback();
        }
    }, 100);
}

ready('#someid_' + window.quantity, function(){
    // code here
});

Если ожидается, что 7 изображений будут загружаться с задержкой, функция сработает когда этот элемент существует:

<img id="someid_7" src="/imgnamefoo.jpg">

РЕДАКТИРОВАТЬ: я пытался это попробовать и вызвать мой код, когда атрибут sr c был переписан: 

$(document).on('load', 'img[src*="blank.jpg"]', function(){
    //code here    
});

И я тоже попробовал это, подозревая, что, возможно, элемент img был полностью переписан или заменен в DOM. Этот ищет новый sr c: 

$(document).on('load', 'img[src*="foo.jpg"]', function(){
    //code here    
});

Оба были неудачными.

РЕДАКТИРОВАТЬ: РЕШЕНО! Вот код, который в итоге заработал: 

(function(){
    const daReviewItems = digitalData.cart.item.length;

    function whenRemoved(element, callback) {
        var interval = setInterval(function() {
            if (document.querySelectorAll(element).length < daReviewItems) {
                callback();
            }
        }, 100);
        return interval;
    }
    function whenExists(element, callback) {
        var interval = setInterval(function() {
            if (document.querySelectorAll(element).length) {
                clearInterval(interval);
                callback();
            }
        }, 100);
        return interval;
    }
    var loop_id = 0;
    whenRemoved('elem',function(){
        if (loop_id) return;
        loop_id = whenExists('img',function(){
            //SOME CODE HERE
            loop_id = 0;
        });
    });
})();

Он обернут в анонимную функцию, чтобы сохранить глобальную область видимости. По сути, он ожидает, что 'elem' не существует, а затем проверяет, существует ли img, который я хочу отредактировать. Если это так, то любые imgs, к которым я еще не добавил класс 'elem', заставляют функцию запускаться на них. Итак, при начальной загрузке 'elem' не существует, потому что я еще не добавил этот класс, поэтому код срабатывает. Затем, если imgs удаляется или перезагружается, мой класс 'elem' удаляется, поэтому он снова запускается и снова ждет imgs. Loop_id проверяет итерацию и предотвращает бесконечный цикл кода. Я должен поблагодарить разработчика, которого я знаю, за помощь в этом. У него нет пользователя здесь, но он заслуживает доверия. Итак, спасибо!

...