第一百五十七節，封裝庫--JavaScript，預加載圖片

時間 2019-11-12

原文原文鏈接

封裝庫--JavaScript，預加載圖片css

首先了解一個Image對象，爲圖片對象html

Image對象緩存

var temp_img = new Image(); //建立一個臨時區域的圖片對象
alert(temp_img); //[object HTMLImageElement]對象函數

Image對象src屬性,屬性值是src地址，這個src地址會在後臺加載到本地緩存動畫

var temp_img = new Image(); //建立一個臨時區域的圖片對象
temp_img.src = 'http://www.wallcoo.com/animal/Dogs_Summer_and_Winter/wallpapers/1920x1200/DogsB10_Lucy.jpg';
this

Image對象，事件url

onload //事件，當圖片加載成功時觸發事件函數
onerror //事件，當圖片加載失敗時觸發事件函數spa

如：下列 3d

var temp_img = new Image();            //建立一個臨時區域的圖片對象
    temp_img.onload = function () {
        alert('圖片加載成功，顯示圖片');
    };
    temp_img.onerror = function () {
        alert('圖片加載失敗，什麼都不幹');
    };
    temp_img.src = 'http://www.wallcoo.com/animal/Dogs_Summer_and_Winter/wallpapers/1920x1200/DogsB10_Lucy.jpg';
    //注意：最好把src，寫在事件後面，不然ie不兼容

預加載圖片,就是當用戶查看當前圖片時，提早將上一張和下一張圖片加載好，當用戶查看上一張或者下一張是不用等待加載，code

效果圖

html

<!--預加載-->
    <div id="photo">
        <dl>
            <dt><img xsrc="img/p1.jpg" yjz="img/p1big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>預加載圖片</dd>
        </dl>
        <dl>
            <dt><img xsrc="img/p2.jpg" yjz="img/p2big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>延遲加載圖片</dd>
        </dl>

        <dl>
            <dt><img xsrc="img/p3.jpg" yjz="img/p3big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>延遲加載圖片</dd>
        </dl>

        <dl>
            <dt><img xsrc="img/p4.jpg" yjz="img/p4big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>延遲加載圖片</dd>
        </dl>

        <dl>
            <dt><img xsrc="img/p5.jpg" yjz="img/p5big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>延遲加載圖片</dd>
        </dl>

        <dl>
            <dt><img xsrc="img/p6.jpg" yjz="img/p6big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>延遲加載圖片</dd>
        </dl>

        <dl>
            <dt><img xsrc="img/p7.jpg" yjz="img/p7big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>延遲加載圖片</dd>
        </dl>

        <dl>
            <dt><img xsrc="img/p8.jpg" yjz="img/p8big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>延遲加載圖片</dd>
        </dl>

        <dl>
            <dt><img xsrc="img/p9.jpg" yjz="img/p9big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>延遲加載圖片</dd>
        </dl>

        <dl>
            <dt><img xsrc="img/p10.jpg" yjz="img/p10big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>延遲加載圖片</dd>
        </dl>

        <dl>
            <dt><img xsrc="img/p11.jpg" yjz="img/p11big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>延遲加載圖片</dd>
        </dl>

        <dl>
            <dt><img xsrc="img/p12.jpg" yjz="img/p12big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>延遲加載圖片</dd>
        </dl>
    </div>
    <div id="photo_big">
        <h2 class="tuo"><img src="img/close.png" alt="" class="close"/>預加載圖片</h2>
        <div class="big">
            <img src="img/loading.gif" alt=""/>
            <strong class="sl">&lt;</strong>
            <strong class="sr">&gt;</strong>
            <span class="left"></span>
            <span class="right"></span>
            <em class="index">22222</em>
        </div>
    </div>

css

/*預加載圖片*/
#photo_big {
    width:620px;
    height:511px;
    border:1px solid #ccc;
    position:absolute;
    display:none;
    z-index:9999;
    background:#fff;
}
#photo_big h2 {
    height:40px;
    line-height:40px;
    text-align:center;
    font-size:14px;
    letter-spacing:1px;
    color:#666;
    background:url(img/login_header.png) repeat-x;
    margin:0;
    padding:0;
    border-bottom:1px solid #ccc;
    /*margin:0 0 20px 0;*/
    cursor:move;
}
#photo_big h2 img {
    float:right;
    position:relative;
    top:14px;
    right:8px;
    cursor:pointer;
}
#photo_big .big {
    width:620px;
    height:460px;
    padding:10px 0 0 0;
    background-color: #333;
}
#photo_big .big img {
    display:block;
    margin:0 auto;
    position:relative;
    top:190px;
}
#photo_big .big strong {
    display:block;
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    background:#000;
    opacity:0;
    filter:alpha(opacity=0);
    font-size:60px;
    color:#fff;
    cursor:pointer;
    position:absolute;
    border-radius: 20px;
}
#photo_big .big strong.sl {
    top:210px;
    left:20px;
}
#photo_big .big strong.sr {
    top:210px;
    right:20px;
}
#photo_big .big span {
    display:block;
    width:300px;
    height:450px;
    background:#000;
    opacity:0;
    filter:alpha(opacity=0);
    position:absolute;
    cursor:pointer;
}
#photo_big .big span.left {
    top:50px;
    left:10px;
}
#photo_big .big span.right {
    top:50px;
    right:10px;
}
#photo_big .big em {
    position:absolute;
    top:470px;
    right:20px;
    color:#fff;
    font-size:20px;
    font-style:normal;
}

前臺js

//預加載圖片
    //點擊彈窗
    $('.wait_load').on_click(function () {
        $('#suo_ping').xian_shi().zhe_zhao_suo_ping().yi_dong_tou_ming({
            'attr': 'o',  //動畫方式
            'target': 50, //目標量
            't': 50,      //每次動畫時間
            'step': 5,     //跨度
            fn: function () {
                $('#suo_ping').chuang_kou_shi_jian(function () {
                    $('#suo_ping').zhe_zhao_suo_ping();
                    $('#photo_big').yuan_su_ju_zhong();
                })
            }
        });
        $('#photo_big').c_css('display', 'block').yuan_su_ju_zhong().tuo_zhuai('tuo');

        var temp_img = new Image();                           //建立臨時圖片對象

        $(temp_img).yuan_su_shi_jian('load',function () {     //當圖片加載成功時
            $('#photo_big .big img').hq_shu_xing_zhi('src',temp_img.src).yi_dong_tou_ming({
                attr:'o',
                target:100,
                t:30,
                step:10
            }).c_css('width','600px').c_css('height','450px').c_css('top',0).shzh_tou_ming_du(0);
        });
        temp_img.src = $(this).hq_shu_xing_zhi('yjz');        //圖片加載地址

        //圖片鼠標劃過
        //左邊
        $('#photo_big .big .left').shu_biao_yi_ru_yi_chu(function () {
            $('#photo_big .big .sl').yi_dong_tou_ming({
                attr:'o',
                target:50,
                t:30,
                step:10
            });
        }, function () {
            $('#photo_big .big .sl').yi_dong_tou_ming({
                attr:'o',
                target:0,
                t:30,
                step:10
            });
        });
        //右邊
        $('#photo_big .big .right').shu_biao_yi_ru_yi_chu(function () {
            $('#photo_big .big .sr').yi_dong_tou_ming({
                attr:'o',
                target:50,
                t:30,
                step:10
            });
        }, function () {
            $('#photo_big .big .sr').yi_dong_tou_ming({
                attr:'o',
                target:0,
                t:30,
                step:10
            });
        });

        //預加載設置
        var children = this.parentNode.parentNode;   //獲取當前元素的父節點的父節點，也就是dl
        prev_next(children);

        //上一張
        $('#photo_big .big .left').on_click(function () {
            shang_xian(this);
            var children = $('#photo_big dl dt img').hq_jd(sh_jd_suo_yin($('#photo_big .big img').hq_shu_xing_zhi('suoy'), $('#photo').sh_jd())).parentNode.parentNode;
            prev_next(children);
        });

        //下一張
        $('#photo_big .big .right').on_click(function () {
            shang_xian(this);
            var children = $('#photo_big dl dt img').hq_jd(xia_jd_suo_yin($('#photo_big .big img').hq_shu_xing_zhi('suoy'), $('#photo').sh_jd())).parentNode.parentNode;
            prev_next(children);
        });

        //共用函數
        function shang_xian(_this) {
            $('#photo_big .big img').hq_shu_xing_zhi('src', 'img/loading.gif').c_css('width', '32px').c_css('height', '32px').c_css('top', '190px');
            var current_img = new Image();

            $(current_img).yuan_su_shi_jian('load', function () {    //當前圖片加載完畢後執行
                $('#photo_big .big img').hq_shu_xing_zhi('src', current_img.src).yi_dong_tou_ming({     //從顯示圖片獲取到索引
                    attr: 'o',
                    target: 100,
                    t: 30,
                    step: 10
                }).shzh_tou_ming_du(0).c_css('width', '600px').c_css('height', '450px').c_css('top', 0);
            });

            current_img.src = $(_this).hq_shu_xing_zhi('src');
        }

        //共用函數
        function prev_next(children) {
            var prev = sh_jd_suo_yin($(children).hq_suo_yin(), children.parentNode);   //獲取當前節點的，上一個節點在父元素的索引
            var next = xia_jd_suo_yin($(children).hq_suo_yin(), children.parentNode);  //獲取當前節點的，下一個節點在父元素的索引

            var prev_img = new Image();  //預加載上一張圖片
            var next_img = new Image();  //預加載下一張圖片

            prev_img.src = $('#photo dl dt img').guo_lv_jie_dian(prev).hq_shu_xing_zhi('yjz');  //預加載上一張圖片
            next_img.src = $('#photo dl dt img').guo_lv_jie_dian(next).hq_shu_xing_zhi('yjz');  //預加載下一張圖片
            $('#photo_big .big .left').hq_shu_xing_zhi('src', prev_img.src);  //將上一張地址賦值給左點擊
            $('#photo_big .big .right').hq_shu_xing_zhi('src', next_img.src); //將下一張地址賦值給右點擊
            $('#photo_big .big img').hq_shu_xing_zhi('suoy', $(children).hq_suo_yin()); //將當前索引賦值給顯示圖片
            //顯示圖片張數
            $('#photo_big .big .index').wen_ben(parseInt($(children).hq_suo_yin()) + 1 + '/' + $('#photo dl dt img').jd_length());
        }

    });

    //關閉彈窗
    $('#photo_big .close').on_click(function () {
        $('#photo_big').c_css('display', 'none');
        $('#suo_ping').yi_dong_tou_ming({
            'attr': 'o',  //動畫方式
            'target': 0, //目標量
            't': 50,      //每次動畫時間
            'step': 5     //跨度
        });
        $('#photo_big .big img').hq_shu_xing_zhi('src','img/loading.gif').c_css('width','32px').c_css('height','32px').c_css('top','190px');  //關閉彈窗後，恢復默認圖片
        $('#suo_ping').jie_chu_suo_ping();
    });