大企业网站性能优化必备方案之“懒加载技术”

最新推荐文章于 2024-07-16 10:09:38 发布

qq_41675286

最新推荐文章于 2024-07-16 10:09:38 发布

阅读量336

点赞数

文章标签：性能优化企业 jquery

本文链接：https://blog.csdn.net/qq_41675286/article/details/79405802

版权

我们平时所看到的网站中的文件、图片等它们并不是属于浏览器的，而是浏览器通过域名到服务器里面请求下载过来的，而下载这些东西需要时间，如果文件非常多非常大，那么下载就会需要很长的时间，这时就会用到懒加载技术，分批次加载这些文件。用户永远只可能看到一个窗口的内容，所以我们就可以先加载一个窗口的内容，再随着滚动条继续加载。例如我们保存的整个京东网页的图片，我们看到的区域为加载出来的图片，而看不到的区域都用京东狗的标志图代替了
这里写图片描述
如果一次加载若干个图片，每个图片都要去访问服务器，那么就会造成服务器的压力。所以我们可以先把这些图片下载下来存储在浏览器的缓存里面，下一次用到的时候直接到浏览器的缓存里面拿来用就行了，不必到浏览器去请求这么多图片。这样子就变相地提高了加载速度，当滚动条往下面滚动时就会把图片替换回来，这样每一次加载的图片数量就少了，提高了网站性能。
下面带大家看一个懒加载技术的例子，代码如下：

<!--
    声明文档类型：html（html5)
    作用：符合W3C的统一标准规范
    每个浏览器对html css js的代码都有不同的编译模式（即兼容模式）
-->
<!DOCTYPE html>
<html><!--超文本标记语言 根目录节点标签-->
    <head><!--头部：可视化标签-->
        <meta charset="utf-8" /><!--字符编码：国际编码-->
        <title>图片懒加载技术</title>
        <meta name="description" content="描述：对网页内容的大概的介绍">
        <meta name="keyworders" content="关键词1，关键词2">
        <style>
            *{
                margin:0;
                padding:0;
            }
            body{
                background-color: #434343;
            }
            #box{
                width:930px;
                /*height:500px;*/
                background-color:#2D2D2E;
                margin:50px auto;/*上下50px,左右自动居中*/
                border-radius: 10px;
                overflow: hidden;/*超出隐藏*/
            }
            #box img{
                float:left;
                width:288px;
                height:175px;
                margin:10px;
                border:1px solid #fff;
                border-radius: 10px;

                        }
            #box img:hover{
                opacity:0.5;/*改变透明度*/
            }
        </style>
    </head>
    <body><!--身体 可视化标签-->
        <div id="box"> 
            <img src="img/pic1.jpg" >
            <img src="img/pic2.jpg">
            <img src="img/pic3.jpg" >
            <img src="img/pic4.jpg"> 
            <img src="img/pic1.jpg" >
            <img src="img/pic2.jpg">
            <img src="img/pic3.jpg" >
            <img src="img/pic4.jpg"> 
            <img src="img/pic1.jpg" >
            <img src="img/pic2.jpg">
            <img src="img/pic3.jpg" >
            <img src="img/pic4.jpg"> 
            <img src="img/pic1.jpg" >
            <img src="img/pic2.jpg">
            <img src="img/pic3.jpg" >
            <img src="img/pic4.jpg"> 
            <img src="img/pic1.jpg" >
            <img src="img/pic2.jpg">
            <img src="img/pic3.jpg" >
            <img src="img/pic4.jpg"> 
            <img src="img/pic1.jpg" >
            <img src="img/pic2.jpg">
            <img src="img/pic3.jpg" >
            <img src="img/pic4.jpg"> 
            <img src="img/pic4.jpg"> 
            <img src="img/pic1.jpg" >
            <img src="img/pic2.jpg">
            <img src="img/pic3.jpg" >
            <img src="img/pic4.jpg"> 
            <img src="img/pic4.jpg"> 
            <img src="img/pic1.jpg" >
            <img src="img/pic2.jpg">
            <img src="img/pic3.jpg" >
            <img src="img/pic4.jpg"> 
            <img src="img/pic4.jpg"> 
            <img src="img/pic1.jpg" >
            <img src="img/pic2.jpg">
            <img src="img/pic3.jpg" >
            <img src="img/pic4.jpg"> 
            <img src="img/pic4.jpg"> 
            <img src="img/pic1.jpg" >
            <img src="img/pic2.jpg">
            <img src="img/pic3.jpg" >
            <img src="img/pic4.jpg"> 
            <img src="img/pic4.jpg"> 
            <img src="img/pic1.jpg" >
            <img src="img/pic2.jpg">
            <img src="img/pic3.jpg" >
            <img src="img/pic4.jpg"> 
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="js/lazyload.js"></script>
        <script>
            var lazyload=$.noConflict();
            lazyload(function(){
                lazyload("img").lazyload({
                    placeholder:"img/loading.png"
                })
            })
        </script>

    </body>
</html>

在上面的js代码中我引入了一个用jQuery插件库封装出来的懒加载插件，有需要的可以找我获得哦!!!

qq_41675286

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
大企业网站性能优化必备方案之“懒加载技术”

我们平时所看到的网站中的文件、图片等它们并不是属于浏览器的，而是浏览器通过域名到服务器里面请求下载过来的，而下载这些东西需要时间，如果文件非常多非常大，那么下载就会需要很长的时间，这时就会用到懒加载技术，分批次加载这些文件。用户永远只可能看到一个窗口的内容，所以我们就可以先加载一个窗口的内容，再随着滚动条继续加载。例如我们保存的整个京东网页的图片，我们看到的区域为加载出来的图片，而看不到的区域都用...
复制链接

扫一扫