Проблема в том, что IntersectionObserver API не работает в декстопной версии на Vue. Как только включаешь режим Mobile, всё грузится. При чем проблема появилась недавно, раньше это работало. Уже поставил полифилл, но не помогло.
С чем это может быть связано?
export default {
inserted: el => {
function loadImage(){
if(el.childNodes.length !== 0){
el.childNodes[0].srcset = el.childNodes[0].dataset.srcset;
el.childNodes[2].src = el.childNodes[2].dataset.src;
}else{
el.src = el.dataset.src
}
}
function callback(entries, observer){
entries.forEach(entry =>{
if(entry.isIntersecting){
loadImage();
observer.unobserve(el);
}
})
}
function createIntersectionObserver(){
const options = {
root: null,
threshold: [0]
}
const observer = new IntersectionObserver(callback, options);
observer.observe(el);
}
if(!window['IntersectionObserver']){
loadImage();
}else{
createIntersectionObserver();
}
}
}
template
<picture v-lazyload>
<source type="image/webp" :data-srcset="imagesWebp" style="max-width:100%; height:auto">
<img :data-src="images" style="max-width:100%; height:auto">
</picture>
Вот в мобильном режиме, когда элемент (el) заходит в зону видимости viewport, он выводит этот элемент в консоль, например, а в декстопной версии - он как будто не видит элемент, ничего не происходит ...
Продвижение своими сайтами как стратегия роста и независимости