前端图片优化

时间 2019-11-08

标签前端图片优化繁體版

原文原文链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="" id='myimg' width="50" height="50">
    <script type="text/javascript">        
        //先让浏览器加载img标签，而后在JS中为img标签指定图片 
        document.getElementById("myimg").src="vichin.jpg";
    </script>
</body>
</html>

优化页面图片加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>添加图片缓存</div>
    <img src="vichin.jpg" id="img2" width="100" height="100">
    <script type="text/javascript">        
        window.onload=function () {
             var myimgs=new Image();
             myimgs.src="vichin.jpg"
             myimgs.onload=function () {
                  alert('hi、vichin!');
             }            
        }
//这样图片只会在页面初次请求时被加载
    </script>
</body>
</html>

为页面添加图片缓存

当<script>标签变多的时候，也会影响性能。（下载一个100K的文件比下载4个25K的文件速度要快，由于浏览器向服务器发送的请求次数也会影响到性能）减小<script>标签，有助于减小对服务器的请求。so,尽量的将页面上的脚本放到一个脚本文件中。可是当脚本过大时，页面在加载完全部的标签以后，进行脚本加载时，因为脚本过大，会锁定浏览器一大段时间，为了不这种状况的发生，须要向页面逐步添加脚本（window的load事件开始后加载脚本）。

尽可能将多个脚本合并成一个脚本

尽量避免使用document.write()，而是使用innerHTML或直接操做DOM代替。
若没法避免使用document.write()，则能够在文件末尾处设置绝对位置调用脚本，或者在隐藏的div里调用脚本，而后经过操做DOM将该div里的内容移到须要的位置。

一、绝对位置调用脚本
    <style type="text/css">
        .content,.banner{
            position: absolute;
            left: 10px;
        }
        .content{
            top:40px;
        }
        .banner{
            top:10px;
        }
    </style>
    <div class="content">
        lorem ipsum
    </div>
    <div class="banner">
        <script type="text/javascript"></script>
    </div>


二、隐藏的div里调用脚本
        <div id="banner" style="height: 20px;width:16px">
        
    </div>
    <div class="temp">
        <div id="mystuff">
            <script type="text/javascript" src=xxx.js></script>
        </div>
    </div>
    <script type="text/javascript">
        var ba=document.getElementById("banner");
        var ms=document.getElementById("mystuff");
        if ((ba!=null)&&(ms!=null)) {
            ba.appendChild(ms)
        }
    </script>

尽量避免使用document.write()

当一个页面须要有多个图片的时候，能够将多张图片合成一张图片，再以切片的形式使用它们。CSS精灵生成器。

        <input type="button"  style="width: 20px;height:20px;background:url(pic/pic4btn.png) no-repeat 0 -20px; "/> 

在pic文件夹下存在一张名为pic4btn.png的图片

每一个小图标的大小为20px*20px，图片的左上角为0，0处，向右画一条线为X轴，向下为Y轴。由于input标签的大小为20px*20px，因此，将这个图片放到input标签中做为背景，就只能显示百度的logo，如果须要使用第二张图片，须要将这个图片往上移动20px,因此在no-repeat 0 后面是-20px。

将多个图片合并成一个图片

　　pic4btn.png javascript