Мне было поручено преобразовать функцию jQuery в простой JavaScript. Функция используется для проверки, находится ли элемент в области просмотра. Если он находится в области просмотра, возьмите атрибут data-bglazy и добавьте стиль фонового изображения к этому элементу, используя значение этого атрибута. Функция, которая должна быть преобразована:
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).on('resize scroll', function() {
$('.bgLazy').each(function() {
if ($(this).isInViewport()) {
var lazyImg = $(this).attr('data-bglazy');
$(this).css('background-image', 'url(' + lazyImg + ')');
}
});
});
В настоящее время, что я имею при попытке преобразовать вышеуказанную функцию в JavaScript:
function isInViewport(el){
var elementTop = el.offsetTop;
var elementBottom = elementTop + el.offsetHeight;
var viewportTop = window.scrollTop;
var viewportBottom = viewportTop + window.offsetHeight;
return elementBottom > viewportTop && elementTop < viewportBottom;
};
var bgElements = document.querySelectorAll('.bgLazy');
bgElements.forEach(bgElementLoop);
function bgElementLoop(item, index) {
if(item.isInViewport()){
var lazyImg = item.getAttribute('data-bglazy');
item.style.backgroundImage = 'url(' + lazyImg + ')';
}
}
window.addEventListener("resize, scroll", bgElementLoop);
Я пытаюсь выяснить, какую часть я облажался при попытке преобразовать функцию jQuery в JavaScript
EDIT:
Я внес изменения в представление после прочтения некоторых комментариев. функция isInViewport не изменилась, но я изменил следующее:
var bgElements = Array.prototype.slice.call(document.querySelectorAll('.bgLazy'));
bgElements.forEach(bgElementLoop);
function bgElementLoop(item, index) {
if(item.isInViewport(item)){
var lazyImg = item.getAttribute('data-bglazy');
item.style.backgroundImage = 'url(' + lazyImg + ')';
}
}
window.addEventListener("resize", bgElementLoop);
window.addEventListener("scroll", bgElementLoop);
Итак, что я сделал здесь, изменил переменную bgElements с
var bgElements = document.querySelectorAll('.bgLazy');
до
var bgElements = Array.prototype.slice.call(document.querySelectorAll('.bgLazy'));
Затем я разделил прослушиватели событий изменения размера и прокрутки на:
window.addEventListener("resize", bgElementLoop);
window.addEventListener("scroll", bgElementLoop);