图片的预加载与懒加载

时间: 2020-01-26阅读: 285标签: 图片

图片预加载与懒加载

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


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

实现方式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>
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7786

html5图片上传使用FileReader预览

通过FileReader,和es6的方法解构赋值,promise对象简单封装上传预览,具体逻辑:选中图片之后,触发onchange方法,获得上传文件对象,调用fileReader方法验证图片是否符合上传需求,符合返回图片文本,不符合返回错误信息。

html2canvas 生成的图片变模糊解决方案

背景图片和二维码还有用户微信头像生成一张图片,可供用户下载。打开页面的时候就是一张图可以保存,html2canvas插件即可实现效果,效果是实现了,但是很郁闷,图片模糊了。。。。

前端开发中对图片的优化技巧有哪些?

除了内容图片,其他的图片的作用是修饰,也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片!所以在优化之前要做的,首先是确认设计,设计本身是否需要用那么多图片?还是说可以更简洁?

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

前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?

img图片不存在显示默认图

在项目中,我们使用img标签加载图片,有时候图片地址有可能失效,获取路径问题,导致图片加载失败,img标签就会显示alt内容。这时候用户体验不是很好,所以就需要显示一张默认图片

网页图片不存在时不显示默认图片

当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用。

谈谈 Web 图片浏览体验与优化

图片,在一张网页上起到了相当大的作用。一个充满艺术的网站,它们的排版往往十分简洁、大方,整张网页的美感全体现在了一张背景图和产品图=== 而在浏览这样的网页时,其响应速度决定了用户体验。如果你正在打开一个自己比较感兴趣的网站

图片下载的几种实现

通过浏览器自动下载。浏览器接收到二进制文件,自动转码下载。比如:window.open()通过xhr下载。ajax请求得到的是二进制文件,只能手动转码下载。

CSS如何将图像转换为模糊图像?

在CSS中,可以使用filter属性来模糊处理图像;filter属性用于将图像转换为模糊图像。该属性主要用于设置图像的视觉效果。blur():给图像设置高斯模糊,值越大越模糊。

css如何控制图片不变形?

在做网页时会遇到许多的问题,有的时候会遇到图片变形的问题,我们该如何通过css控制图片不变形呢?下面我们来看一下通过css控制图片不变形的方法。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广