JS优化之图片懒加载

懒加载

懒加载是一种网页性能优化的方式,它能极大的提升用户体验。图片一直是影响网页性能的主要元凶,现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源,那么可能等图片加载出来用户也早就走了。所以进入页面的时候,只请求可视区域的图片资源。

总结出来就是:

  • 减少资源的加载,页面启动只加载首屏的图片,这样能明显减少了服务器的压力和流量,也能够减小浏览器的负担。
  • 防止并发加载的资源过多而阻塞 js 的加载,影响整个网站的启动,影响用户体验
  • 浪费用户的流量,有些用户并不想全部看完,全部加载会耗费大量流量。

原理

图片懒加载的原理就是暂时不设置图片的 src 属性,而是将图片的 url 隐藏起来,比如先写在 data-src 里面,等当前图片是否到了可视区域再将图片真实的 url 放进 src 属性里面,从而实现图片的延迟加载。

  function lazyload(){
    let imgs = document.querySelectorAll('img[data-src]')
    imgs.forEach((item,index) => {
        let clientHeight = document.documentElement.clientHeight
        let scrollTop = document.documentElement.scrollTop
        if(item.dataset.src === '') return
        if( item.offsetTop - scrollTop < clientHeight){
            item.src = item.dataset.src
            item.removeAttribute('data-src')
        }
    })
}
window.addEventListener('scroll', lazyload)

 

通过上面例子的实现,我们要实现懒加载都需要去监听 scroll 事件,尽管我们可以通过函数节流的方式来阻止高频率的执行函数,但是我们还是需要去计算 scrollTop,offsetHeight 等属性,有没有简单的不需要计算这些属性的方式呢,答案是有的—IntersectionObserver

const imgs = document.querySelectorAll('img[data-src]')
const config = {
  rootMargin: '0px',
  threshold: 0,
}
let observer = new IntersectionObserver((entries, self) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      let img = entry.target
      let src = img.dataset.src
      if (src) {
        img.src = src
        img.removeAttribute('data-src')
      }
      // 解除观察
      self.unobserve(entry.target)
    }
  })
}, config)

imgs.forEach((image) => {
  observer.observe(image)
})

 

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14821.html

发表评论

登录后才能评论