[英]I coded lazy loading for videos, background images and images but it didn't work on safari
I coded lazy loading for videos, background images and images but didn't work on ios safari.我为视频、背景图像和图像编写了延迟加载代码,但在 ios safari 上不起作用。
I want show the background images/images/video with IntersectionObserver method.我想用 IntersectionObserver 方法显示背景图像/图像/视频。
below codes are for background image and video.以下代码用于背景图像和视频。
<a href="#" id="comp-modal1" data-toggle="modal" data-target="#vidmodal" class="col-12 col-sm-3 align-self-center show-bkg lazy-bg lazy"
data-video="{{ get_template_directory_uri() . $video_path . $qt190}}"
data-srcset="{{ get_template_directory_uri() }}/assets/images/vid-images/show-bk.jpg" aria-label="background">
<div class="show-info">
<i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
<h3>QTech QT190 Journey</h3>
</div>
</a>
<video data-src="/wp-content/uploads/2019/03/Aristospray-QTech-Q5-2-minute-montage-v3-android-pad-compress.mp4"
poster="{{ get_template_directory_uri() }}/assets/images/vid-images/pistol-suction.jpg"
width="100%" height="auto"
class="lazy"
aria-label="video"
data-id="vid1">
</video>
and this is my JS =这是我的 JS =
const lazy ={
img:(img)=>{
img.src = img.dataset.src;
},
background:(bg)=>{
bg.style.backgroundImage = `url(${bg.dataset.srcset})`;
},
video:(vid)=>{
vid.load();
fetchVideoAndPlay(vid);
},
}
function fetchVideoAndPlay(video){
const preloadHolder = (document.querySelector(`#${video.dataset.id}`));
//console.log(video.dataset.src);
fetch(video.dataset.src)
.then(response=> {
video.setAttribute('data-src','');
return response.blob();
})
.then(blob=>{
video.src = URL.createObjectURL(blob);
video.muted = true;
preloadHolder.remove();
return video.play();
})
.then(()=>{
console.log('Played');
})
.catch( (e)=>{
console.error(e);
});
}
const lazyItems = [].slice.call(document.querySelectorAll('.lazy'));
const configInterSection = {root: null,rootMargin: '0px',threshold: [0]};
if ('IntersectionObserver' in window) {
let lazyObserver = new IntersectionObserver(function(entries){
// fire lazy loading
entries.forEach(function(item) {
if (item.isIntersecting) {
if(item.target.ariaLabel == 'background') lazy.background(item.target);
if(item.target.ariaLabel == 'image') lazy.img(item.target);
if(item.target.ariaLabel == 'video') lazy.video(item.target);
// remove & add classes
item.target.classList.remove('lazy');
item.target.classList.add('lazy-loaded');
//unboud
lazyObserver.unobserve(item.target);
}
});
}, configInterSection);
if(Array.isArray(lazyItems)){
lazyItems.forEach(function(lazy) {
lazyObserver.observe(lazy);
});
}
}
-Is there a way to modify this code in ios Safari? - 有没有办法修改 ios Safari 中的代码?
item.target.ariaLabel
is availbale in v8 engine (chrome). item.target.ariaLabel
在 v8 引擎 (chrome) 中可用。 hence I changed it to item.target.getAttribute('aria-label')
因此我将其更改为
item.target.getAttribute('aria-label')
now it works.现在它可以工作了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.