<!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>
当一个页面需要有多个图片的时候，可以将多张图片合成一张图片，再以切片的形式使用它们。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