js资源按需加载和预加载

、

很多同志可能忘记怎么写按需加载，一篇文章让你读懂。

1 这里资源指cssjs文件img图片 按需加载即加载现在需要使用的 预加载指在空闲的时间里加载其他的资源

<img src="../../图片储存/0.jpg" data-src="../../图片储存/2.jpg" alt="" class="lazyload-img">
    <img src="../../图片储存/0.jpg" data-src="../../图片储存/3.jpg" alt="" class="lazyload-img">
    <img src="../../图片储存/0.jpg" data-src="../../图片储存/4.jpg" alt="" class="lazyload-img">
    <img src="../../图片储存/0.jpg" data-src="../../图片储存/2.jpg" alt="" class="lazyload-img">
    <img src="../../图片储存/0.jpg" data-src="../../图片储存/2.png" alt="" class="lazyload-img">
    <img src="../../图片储存/0.jpg" data-src="../../图片储存/2.jpg" alt="" class="lazyload-img">

 2 思想：{

        优先加载首屏上的图片 当滚动条滚动时判断在加载其余滚动到的地方的图片

3 实现：{

        一种方式: 1 用一张加载图片代替所有图片 设置自定义属性data-src等于真正的地址图片 在加上一个class类名表示这些图片是需要被延时加载的

        2 在将所有有这个类名的img汇成一个数组 进行滚动条判断 当条件成立加载真正的图片 并在数组中去处 减少访问次数

// 图片按需加载
    var lazyLoadClass = '.lazyload-img';
    var imgArr = Array.prototype.slice.call(document.querySelectorAll(lazyLoadClass));

    lazyLoadImgs();

    var timer = null;
    window.addEventListener('scroll', function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            lazyLoadImgs();
        }, 100);
    }, false);

    function lazyLoadImgs() {
        for (var i = 0; i < imgArr.length; i++) {
            if (isInVisibleArea(imgArr[i])) {
                imgArr[i].src = imgArr[i].getAttribute('data-src');
                imgArr.splice(i, 1);
                i--;
            }
        }
    }


    function isInVisibleArea(el) {
        var rect = el.getBoundingClientRect();

        return rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left < window.innerWidth;
    }

 4 预加载一般用在漫画时 new一个image 在哪调用其src属性即可完成预加载

   

//上面的代码无法实现 我猜测是因为img本身的高度不明确 js无法判断scroll

//    2. 其他内容的按需加载
    loadProduct();
    window.addEventListener('scroll', loadProduct, false);

    function loadProduct() {
        if (isInVisibleArea(document.getElementById('product'))) {
            var script = document.createElement('script');
            // script.src = 'js/loadProduct.js';
            setTimeout(function () {
                script.src = './loadProduct.js';
            }, 1000);
            document.body.appendChild(script);

            window.removeEventListener('scroll', loadProduct, false);
        }
    }

    // 3. 图片预加载
    var img = new Image();
    img.src = '../../图片储存/212.jpg';