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

2023年8月8日 122次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞