关于预加载和按需加载

 // 3. 图片预加载
        var img = new Image();
        img.src = 'img/recommend/5.jpg';

        // 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 = 'js/loadProduct.js';
                }, 1000);
                document.body.appendChild(script);

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

1.预加载是不是还需要别的代码辅助？如果需要希望老师敲给我看看

2.window.removeEventListener('scroll', loadProduct, false);这句话有什么作用？

如果滚动一次就解除绑定，岂不是后面没加载的图片无法按需加载了

迷失的小麦 2020-03-09

源自：移动性能优化 4-8 资源按需加载和预加载（2）

收起

2回答

好帮手慕慕子 2020-03-09 19:10:01

同学你好，对于你的问题解答如下：

可以获取dom元素，结合appenChild方法，将图片添加到指定元素中，然后在页面中显示。
因为视频中老师以加载js文件为例讲解的，所以只需要加载一次即可。
如果是按需加载图片的话，就不需要解除绑定的事件，老师这里主要是讲解按需加载的思路，重点了解下实现的思路，在实际工作中，遇到按需加载的功能，结合实际场景，运用所学知识实现效果就可以了。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

好帮手慕慕子 2020-03-09 14:17:17

同学你好，对于你的问题解答如下：

同学粘贴的这部分代码已经实现了图片预加载，最后将图片添加到页面中显示即可。
预加载就是提前现请求图片，当用户访问时，直接从浏览器本地缓存中获取图片，提升访问速度。但是提前加载很多图片会给服务器造成压力，所以实际工作中并不推荐使用这种方式，同学了解下即可，实际工作中更多的是使用按需加载，或者懒加载图片实现效果，提升用户体验的同时，减轻服务器的压力。
window.removeEventListener('scroll', loadProduct, false)这句代码是解除前面绑定的scroll事件，因为老师这里演示的是加载js文件，只需要加载一次即可，所以在加载完成之后，解除了绑定的scroll事件。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答