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

最新推荐文章于 2021-07-17 09:08:42 发布

不断学习的ITer

最新推荐文章于 2021-07-17 09:08:42 发布

阅读量1.5k

点赞数

分类专栏： Jquery/Javascript 文章标签：网易 div class function random button

本文链接：https://blog.csdn.net/wyqlxy/article/details/6607852

版权

Jquery/Javascript 专栏收录该内容

103 篇文章 0 订阅

订阅专栏

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;">//图片展示区域（每次一张图片的显示）

</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();
            });
        });