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

时间 2019-11-09

标签图片加载 jsonp 一个疑问栏目 JSON 繁體版

原文原文链接

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

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

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

全部的img都自定义一个data-src属性，名字能够随便取。这个属性放着该图片的地址，并且不给img添加src属性。由于添加了src属性即便为空，仍是会有请求的。
当滑动到用户能够看见的部分以后，将img的data-src属性值赋值给img的src属性，这时候img才会去加载图片资源。

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

<!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？json