javascript常用技巧

1 使用localstorage和sessionStorage，可以将数据存储到本地，获取值的时候也很简单。通过它应该可以优化一些与页面数据传输有关的功能。目前为止还没有用到。

2 有的时候有些图片可能需要即时显示，但是它从后台加载需要一定时间。这样会造成不好的客户体验。比如鼠标移动到一个element上，显示出一张相关的图片。因为这张图片不是在加载文档的时候加载的，而是在鼠标移动上去的时候加载的。这个时候最好让图片先加载出来，放到缓存中去。可以使用下面的js来完成。

<script>

 var img = new Img();

img.src = "/img/aa.jpeg" ;  //假设存在这样的一张图片

function change(){    //该方法能够实现图片的替换

     $("#imgDiv").src =img.src;  //假设有一个id为imgDiv的image元素

}

</script>

3 jquery实现图片的轮播。代码如下，虽然很丑，但是胜在是自己写的。当然，你也可以用美化一下css样式，用淡入淡出控制图片的显示等。

<div id="imgDiv" style="margin:10%;">
<div class="img" id="img1" width="80%" style="display:none;">
<img src="img1.jpg" alt="img1">
</div>
<div class="img" id="img2" width="80%"  style="display:none;">
<img src="img2.jpg" alt="img2">
</div>
<div class="img" id="img3" width="80%"  style="display:none;">
<img src="img3.gif" alt="img3">
</div>
<div class="img" id="img4" width="80%"  style="display:none;">
<img src="img4.jpg" alt="fuli">
</div>
</div>
<script type="text/javascript">
var num = 1;var img1 = $("#img1");
img1.show();
setInterval(function(){
var imgs = $("#imgDiv").children();
if($(imgs[num-1]).is(":visible") && num < imgs.length){
$(imgs[num-1]).hide();
$(imgs[num]).show();
}else if(num==imgs.length){
$(imgs[num-1]).hide();
$(imgs[0]).show();
num=0;
}
num++;
},2000);
</script>