JQuery Event Element no Viewport
$(document).ready(function () {
function checkImages() {
$('img:not(.checked)').each(function () {
if ($(this).isOnScreen()) {
$(this).addClass('checked');
console.log('user saw this image', this.src);
// do some stuff
}
});
}
$.fn.isOnScreen = function () {
const win = $(window);
const viewport = {
top: win.scrollTop(),
left: win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
const bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
$(window).scroll(function () {
checkImages();
});
checkImages();
});
Bad Bear