• 前端图片优化


    <!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里的内容移到需要的位置。
    
    1、绝对位置调用脚本
        <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>
    
    
    2、隐藏的div里调用脚本
            <div id="banner" style="height: 20px;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=" 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 

  • 相关阅读:
    mysql基础(三)
    mysql基础(二)
    Mysql基础(一)
    Less32-Less-33
    Less-27
    Less-26
    Less-25
    Less-23
    Less18-Less19
    Less13-Less-14
  • 原文地址:https://www.cnblogs.com/vichin/p/9785838.html
Copyright © 2020-2023  润新知