图片的预加载与懒加载

图片预加载与懒加载

由名字可以知道,图片的预加载->当用户需要查看图片可以直接从本地缓存中取到(提前加载下来的),图片的懒加载->是当用户一次性访问的图片数量比较多的时候,会减少请求的次数或者延迟请求,是一种服务器前端的优化
总结来说: 图片的预加载在一定程度上加强了服务器的压力, 图片的懒加载在一定程度上减轻了服务器的压力

预加载
就是在我们需要使用到图片资源的地方之前就先把这些图片资源加载下来,这样在我们使用的地方就会直接从本地缓存中去取

实现方式1 : 可以直接在使用之前报所以资源加载下来这样就会缓解当在需要使用的地方所有资源加载太慢而出现的副作用

//css
.image {
    width: 100vw;
    height: 100vh;
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg"),
      url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg"),
      url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-2_1.jpg"),
      url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg"),
      url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-5_1.jpg"),
      url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg");
    background-size: cover;
    opacity: 1;
    animation: bgmove 10s infinite;
    overflow: hidden;

实现方式2 : 可以使用image 对象,每创建一个image对象的时候就给浏览器缓存了一张图片,在需要使用的极速加载

//js
 <script>
        var arr = [
           "https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg",
           "https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-2_1.jpg",
           "https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg",
           "https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-5_1.jpg",
        ];

        var imgs = []
        preLoadImg(arr);

        //图片预加载方法
        function preLoadImg(pars) {
            for (let i = 0; i < arr.length; i++) {
                imgs[i] = new Image();
                imgs[i].src = arr[i];
            }
        }
    </script>

补充一个小问题:当我们创建var imageobj = new image()image 对象,直接给对象src赋值,可以追加到页面图片可以显示,但是当我们打印image对象的宽高时显示都是为0的,那时因为即使图片已经经过了预加载但是图片的加载速度还是会慢于html的加载速度,所以解决办法就是使用onload方法,在图片已经完全加载完成之后再打印,这样就可以取到图片的宽高了.

懒加载
自定义一个属性存放img的真实地址,在img 的src属性存放一个占位的图片地址(小图或者是图片加载的动图),当img出现在浏览器的可视区域时再将真实的图片地址赋值给img的src属性,减轻服务器端的压力

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            margin-top: 1000px;
        }
    </style>
</head>
<body>
    <div class="container">
        <img id="img1" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2167624966,4016886940&fm=26&gp=0.jpg"
            data-src="https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg" alt="">
    </div>
</body>
</html>
<script>
    var viewPortHeight = window.innerHeight;
    let $img1 = document.getElementById('img1');
    function viewport(el) {
        return el.offsetTop - document.documentElement.scrollTop+200 <= viewPortHeight;
    }
    window.onscroll = function(){
        //如果图片出现在页面的可视区域,就替换真实的图片
        if(viewport($img1)){
            console.log('图片出现在页面中');
        //也可以在这里添加图片加载的动画
            $img1.src = $img1.getAttribute("data-src");
        }else{
            console.log('图片没有出现');
        }
    }
</script>

链接: https://fly63.com/article/detial/7786

图片的预加载与懒加载

原生Js对文件类型的判断，判断文件是图片，视频等格式

前端图片懒加载的实现，采用Lazy Load 图片延迟加载提高用户体验

web前端图片加载优化，从图片模糊到清晰的实现过程

lazysizes.js使用方法_实现图片懒加载、延迟加载的js插件

js实现图片局部放大效果

网站图片优化的重要性与技巧方案

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

原生js 生成海报图_利用canvas合成图片的实现方法

网页中默认图片的几种解决方式

h5移动端禁止长按图片保存