Skip to content

Latest commit

 

History

History
123 lines (89 loc) · 3.71 KB

05. 懒加载与预加载.md

File metadata and controls

123 lines (89 loc) · 3.71 KB
Raw

懒加载与预加载

懒加载

  • 图片进入可视区域之后请求图片资源
  • 对于电商等图片很多，页面很长的业务场景使用
  • 作用1：减少无效资源的加载
  • 作用2：并发加载资源过多会阻塞 js 的加载，影响网站的正常使用

原理：

  • img 标签的 src 被设置之后，webkit 会解析到 img 的 src，从而会向 webserver 发送请求图片资源。
  • 我们希望 img 的 src 在进入可视区域后才被设置 src,而不是在页面一开始加载的时候就设置 src。从而实现懒加载。
  • 如果图片一开始就被设置了 src，则图片资源就会在页面一开始时就会被加载进来，从而就不会存在懒加载了。

实现：

  • 一开始，img 的 src 并不是真正的 img url ，而是一个只有 1px 的占位符，它真正的 img url 被存放在 data-url 属性中，
  • 因为真正的 img url 并没有存放在 img src 中，所以它并不会向 webserver 发送请求，去请求图片资源，
  • 当监听 scroll 事件触发到图片已经进入可视区域后，才动态的设置 src，即将 img data-url 中的值放置到 src 中。
  • img src 的变化就会触发相关图片资源的请求
  • 这种请求机制实际上是延后的。
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);

// 前提：
// 1. 设置图片占位符，即高度

// $.lazyload

预加载

  • 预加载与懒加载正好是相反的过程
    • 懒加载实质上是延迟加载。
    • 预加载是图片等静态资源在使用之前的提前请求。
  • 图片等静态资源在使用之前的提前请求
  • 资源使用到时能从缓存中加载，提升用户体验
  • 页面展示的依赖关系维护
  1. img 标签：
<img src="xxx" style="display:none">
  1. 使用 Image 对象：
var img = new Image()
img.src = "xxx";
  1. myPreload.js：
// 使用 XMLHttpRequest 对象

var xmlhttprequest = new XMLHttpRequest();

xmlhttprequest.onreadystatechange = callback;

xmlhttprequest.onprogress = progressCallback;

xmlhttprequest.open('GET', 'http://xxx.xxx.jpg', true);

xmlhttprequest.send();

function callback() {
    if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
        var responseText = xmlhttprequest.responseText;
    } else {
        console.log('Request was unsuccessful:' + xmlhttprequest.status);
    }
}

function progressCallback(e) {
    e = e || event;
    if (e.lengthComputable) {
        console.log('Received' + e.loaded + 'of' + e.total + 'bytes');
    }
}

4.preload.js

总结

懒加载和预加载，本质上是在控制加载的时机。

实际上是在权衡浏览器加载资源的能力：

当加载资源过多时，使用懒加载。当浏览器加载资源非常少时，使用预加载可以最大限度的使浏览器加载资源达到饱和，从而更好利用浏览器加载资源。