zoukankan      html  css  js  c++  java
  • 懒加载和预加载的实现

    提到前端性能优化中图片资源的优化,懒加载和预加载就不能不说,下面我用最简洁明了的语言,说明懒加载和预加载的核心要点以及实现。

    1.懒加载

    懒加载的要点如下:

    1.图片进入可视区域之后请求图片资源;

    2.对于电商等图片较多,页面很长的业务场景很适用;

    3.可以减少无效资源的加载;

    4.并发加载的资源过多会阻塞js的加载,影响网站的正常使用;

    如何实现懒加载呢?要点就是html中img标签src属性为空,给一个data属性,里面存放图片真实地址,在需要的时候,动态的将这个地址赋予图片src属性。

    如下所示:

    <img src="" class="image-item" lazyload="true" data-original="http://pic26.nipic.com/20121213/6168183_004444903000_2.jpg" />

    类似上述代码所示,当需要时间,用js脚本控制图片的加载:

    var viewHeight = document.documentElement.clientHeight // 可视区域的高度
    
    function lazyload () {
      // 获取所有要进行懒加载的图片
      var eles = document.querySelectorAll('img[data-original][lazyload]')
      Array.prototype.forEach.call(eles, function (item, index) {
        var rect
        if (item.dataset.original === '')
          return
        rect = item.getBoundingClientRect()
        // 图片一进入可视区,动态加载
        if (rect.bottom >= 0 && rect.top < viewHeight) {
          !function () {
            var img = new Image()
            img.src = item.dataset.original
            img.onload = function () {
              item.src = img.src
            }
            item.removeAttribute('data-original')
            item.removeAttribute('lazyload')
          }()
        }
      })
    }
    // 首屏要人为的调用,否则刚进入页面不显示图片
    lazyload()
    
    document.addEventListener('scroll', lazyload)

    2.预加载

    预加载的核心要点如下:

    1.图片等静态资源在使用之前的提前请求;

    2.资源后续使用时可以从缓存中加载,提升用户体验;

    3.页面展示的依赖关系维护(必需的资源加载完才可以展示页面,防止白屏等);

    实现预加载主要有三个方法:

    1.html中img标签最初设置为display:none;

    2.js脚本中使用image对象动态创建好图片;

    3.使用XMLHttpRequest对象可以更加精细的控制预加载过程,缺点是无法跨域:

    var xmlhttprequest = new XMLHttpRequest(); 
    xmlhttprequest.open("GET",src,true);
  • 相关阅读:
    Debian安装autoconf
    Linux 解决 bash ./ 没有那个文件或目录 的方法
    C语言strtok()函数:字符串分割
    java.util.logging.Logger使用详解 (转)
    java中Logger.getLogger(Test.class)
    jquery ajax中success与complete的执行顺序 (转)
    navicat如何导入sql文件和导出sql文件
    MySQL修改root密码的多种方法(转)
    查看三种MySQL字符集的方法(转)
    mysql 5.7.13 安装配置方法图文教程(linux) (转)
  • 原文地址:https://www.cnblogs.com/Cathamerst/p/7445715.html
Copyright © 2011-2022 走看看