2013年5月25日 星期六

[JQuery]判斷頁面圖片是否載入完成並延遲載入

需求
當頁面圖片很多、網路又不快時,圖片顯示會由上往下慢慢顯示,這會讓使用者觀感很不好,故我希望在圖片載入完成時,再將該圖片顯示,並用文字提示載入完成,雖然這個需求有很多JQuery的套件可以完成,且效果都還不錯,如 MasonryLazy Load,但還是自己想親手試試,當作給自己的一個小習題 :P
首先先找圖片(找超久..),因放localhost載入會很快,所以我去Google了一些圖片,特別要注意的事,這些圖片像素都很大,我在img標籤指定大小,但這樣實際傳輸的大小會跟原始圖片一樣大,並不會因為指定Size後而有所改變
<img src="http://figurehobbyclub.tw/forum/data/attachment/forum/201305/10/153647wfx1i5xc5a011rz0.jpg" id="Img1" width="300" height="451" />
<img src="http://img.miigii.com.tw/Files/Gonglue/20110201/3d524ac9ddcd45ffa73af674630ad079.jpg" id="Img2" width="300" height="451" />
<img src="http://figurehobbyclub.tw/forum/data/attachment/forum/201305/10/153647wfx1i5xc5a011rz0.jpg" id="Img3" width="300" height="451" />
<img src="http://img.miigii.com.tw/Files/Gonglue/20110201/3d524ac9ddcd45ffa73af674630ad079.jpg" id="Img4" width="300" height="451" />
<img src="http://figurehobbyclub.tw/forum/data/attachment/forum/201305/10/153647wfx1i5xc5a011rz0.jpg" id="Img5" width="300" height="451" />
<img src="http://img.miigii.com.tw/Files/Gonglue/20110201/3d524ac9ddcd45ffa73af674630ad079.jpg" id="Img6" width="300" height="451" />
接著於<head></head>放入以下程式碼,當然請記得載入JQuery,程式大概邏輯是,先抓取每個圖片的DOM,利用this.complete的語法來判斷是否已載入完成,如果載入完成就將此圖片顯示,並印出此DOM的ID,至於GetRumdomStr函式則可忽略,我只是要在每個Src後面加入參數,讓瀏覽器認為這是一個未cache過的圖片。
<script type="text/javascript">
    GetRumdomStr = function () {
        var str = "";
        var maxNum = 10;
        var minNum = 0;
        var n = Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum;
        for (var i = 1; i <= 50; i++) {
            n = Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum;
            str += n.toString();
        }
        return str;
    };

    $(document).ready(function () {
        $('img').hide(); //先把所有圖片先隱藏
        var ImgCount = $('img').length; //取得圖片的個數
        $('img').each(function () {
            var str = GetRumdomStr(); //請忽略,讓圖片加隨機亂數,視為模擬未曾下載過的圖片
            var url = $(this).attr("src");
            $(this).attr("src", url + "?" + str);

            function ImageLoading() {
                msg = "Image ID : " + this.id + "....done";
                console.log(msg);
                $('#msg').append("<div>" + msg + "</div>");
                $(this).fadeIn(2000);
                ImgCount--;
                if (ImgCount === 0) {
                    console.log("All images Loaded..");
                }
            }

            if ($(this).complete) {
                imageLoaded.call(this);
            } else {
                $(this).one('load', ImageLoading);
            }
        });
    });
</script>

完成圖&程式碼下載

image

--

圖片參考

http://figurehobbyclub.tw/forum/data/attachment/forum/201305/10/153647wfx1i5xc5a011rz0.jpg

http://img.miigii.com.tw/Files/Gonglue/20110201/3d524ac9ddcd45ffa73af674630ad079.jpg

沒有留言:

張貼留言