图片预加载，图片懒加载，和jsonp中的一个疑问

2024年2月14日 133次阅读 来源: JinsongChai

之前一直以为图片预加载，图片懒加载是差不多的。其实差很多，出发点就不一样。。。。。下面说一下区别和突然想到的一个问题。
图片预加载：事先把图片就下载下来，当下次页面中需要用到这个图片的时候，就直接去读取缓存的图片
具体应用场景：一个轮播图，每次点击屏幕出现下一张图片，如果网速不大好的情况下，可能会加载的比较慢。所以会出现屏幕卡顿，白屏等情况。利用图片预加载将下一张图片提现缓存下来。这样点击下一张的时候就会读取缓存的图片，而不是发起一个新的http请求了。
原理

  1. 使用javascript中的 new Image() 创建image对象
  2. 给这个image对象的src属性赋值，赋值的同时浏览器就会请求该图片资源。
  3. 当点击出先下一张时，如果下一张的src和刚刚的image对象的src值相同，就会去读取缓存。所以更加流畅了。

图片懒加载：当用户需要看到这一部分内容的时候才加载图片
具体应用场景举例：例如淘宝天猫等商品图片特别多，第一次打开页面的时候不可能把所有商品图片都加载出来，那样页面首屏会特别慢。于是首先只加载用户能看见的那一部分图片。如果用户滑动到下面，则下面的图片才会加载出来，否则不会加载该图片。这样省流量，并且首屏加载比较快。
原理：

  1. 所有的img都自定义一个data-src属性，名字可以随便取。这个属性放着该图片的地址，而且不给img添加src属性。因为添加了src属性即使为空，还是会有请求的。
  2. 当滑动到用户可以看见的部分之后，将img的data-src属性值赋值给img的src属性，这时候img才会去加载图片资源。

疑问：
上面的图片预加载中的new 出来的image直接赋值src属性就能够加载资源了，可是在jsonp中为什么还要把script标签append到页面中才会发起请求呢？在js中创建的script直接赋值src属性能不能立即发起请求？测试咯！

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        
        window.onload = function(){
            var img = new Image();
            img.src = './function.JPG';
            img.onload = function(){
                console.log('图片加载完毕');
            }

            setTimeout(function(){
                console.log('10秒之后执行');
                document.getElementsByTagName('body')[0].appendChild(img);
            },10000)
            
            /*
                将下面的script标签的代码注释掉，上面的输出结果是
                    图片加载完毕
                    10s之后执行  ---> 这里等待了10s
            */


            var script = document.createElement('script');
            script.src = './zepto源码.js';
            script.onload = function(){
                console.log('script加载完毕');
            }
            setTimeout(function(){
                console.log('10秒之后执行');
                document.getElementsByTagName('body')[0].appendChild(script);
            },10000)
             /*
                将上面的图片预加载的代码注释掉，下面的输出结果是
                    10s之后执行  ---> 这里等待了10s
                    script加载完毕
            */    
        }
    </script>
</body>
</html>

通过上面的测试，我们发现了使用document.createElement(‘script’)创建出来的script标签给其src赋值之后并没有立即加载资源。而是等到添加到页面中才加载资源。 WHY？

    原文作者：JinsongChai
    原文地址: https://segmentfault.com/a/1190000015468278
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞