网易图片浏览模块分析：gallery,预加载

http://club.tech.163.com/photoview/36HK0015/6502.html#p=78A41FDT36HK0015


看点：prev和next箭头可以在图片上随意放置，并可以上一页和下一页图片的显示

技术点分析：

  最外层一个div：

<div class="nph_photo_view"> //图片背景和显示区域

          <div id="photoView" class="nph_cnt" style="width: 910px;">//图片展示区域（每次一张图片的显示）

               <i></i><img id="photo" src="http://img3.cache.netease.com/photo/0015/2011-07-06 /78A41FDT36HK0015.jpg">

          </div>

            //向左箭头的放置区域

            <div class="nph_photo_prev"><a id="photoPrev" class="nph_btn_pphoto" target="_self" hidefocus="true" href="#p=78A417U036HK0015"></a></div>

            //向右箭头的放置区域

            <div class="nph_photo_next"><a id="photoNext" class="nph_btn_nphoto" target="_self" hidefocus="true" href="#p=78A41EDM36HK0015"></a></div>

</div>

亮点：

1：通过在一个大的div上放置两个 背景色为透明图的DIV，将整个div风格为两部分，用户向左向右箭头的划分区域

2：在div区域放置一个<A>标签，这样，鼠标进入<a>区域后，就可以显示向左向右的箭头的

左箭头：http://img1.cache.netease.com/cnews/img/gallery11/bg11.cur

右箭头： http://img1.cache.netease.com/cnews/img/gallery11/bg12.cur
js:

$([t.$photoPrev, t.$photoNext].concat(t.$thumbs.$('> a'))).addEvent('click', function(ev){

            var index = t.getIndex(this.href);

            

            if(index !== undefined){

                ev.preventDefault();    

                t.showPhoto(index);

                t.stats();

            }

        });

对左右箭头的click事件绑定，显示上下图片

 

JS的图片预加载： loading图片显示 详细说明

代码要点讲解：

1.绝对定位loading图片在页面上的位置(先隐藏)

2.显示下一张图片前，显示loading图片，并且替换显示区域的img src

3.设置显示区域的img load事件（图片load结束触发的事件），隐藏loading图片

loading图片样式

#divloading
{
display: none;
left: 50%;
top: 50%;
position: absolute;
height: 37px;
width: 37px;
}

HTML代码

<div id="photoshow">
<div id="divloading">
<img src="loading.gif" title="loading" />
</div>
<img src="ruby.png" title="loading" />
<p>
</p>
<input id="btnshow" type="button" value="next" />
</div>

JS代码

$(document).ready(function () {
$("#btnshow").click(function () {
$("#divloading").show();
var imgrandmon;
with (Math) {
imgrandmon = random();
}
//imgrandmon = "LAPOSTE_HP.jpg?" + imgrandmon;
$("#photoshow img").attr("src", "http://img2.cache.netease.com/cnews/2011/8/1/20110801104817a6a3a.jpg");

});
$("#photoshow img").load(function () {

$("#divloading").hide();
});
});