首頁 > 其他

js圖片消極式載入

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！ 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>無標題文檔</title><STYLE>BODY {    PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}UL {    PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}LI {    PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}LI {    FLOAT: left}</STYLE><script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript">function initImg(){    var imgnum=$("img[imgurl]");    var iScrollTop=$(document).scrollTop();//捲軸滾動    var iClientHeight=$(window).height();  //可視化地區    var wintop =iScrollTop+iClientHeight;//捲軸滾動和可視化地區高度    if(imgnum.length){        for(var i=0;i<imgnum.length;i++){            var imgOffsetTop=imgTop(imgnum[i]);            var imgoffsetHight=imgOffsetTop+imgnum[i].offsetHeight;            if(iClientHeight>=imgOffsetTop||wintop>=imgOffsetTop){                loadimg(imgnum[i]);            }           }    }else{$(window).unbind("scroll load resize",initImg);}}

　

   ///載入圖片            function loadimg(img) {                $(img).attr("src", $(img).attr("imgurl"));                $(img).removeAttr("imgurl");                $(img).css("opacity", 0);                $(img).css("filter", "alpha(opacity=0)");                $(img).fadeTo(options.speeds, options.opacitys);            }

　　

 //圖片到表單top的高度function imgTop(element){ return element.offsetTop+(element.offsetParent?arguments.callee(element.offsetParent):0);}     </script> </head> <body><div id="body">   <ul>     <li><img src="img/big_loading.gif" imgurl="img/6.jpg" width="353" height="225" /></li>     <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>     <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>     <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>     <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>     <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>     <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>     <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>     <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>     <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>     <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>     <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>     <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>     <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>     <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>     <li><img src="img/big_loading.gif" imgurl="img/6.jpg"  /></li>   </ul> </div> <script type="text/javascript">$(document).ready(function(){$(window).bind("scroll load resize",initImg);})</script></body></html>

外掛程式式掉用方法

外掛程式編寫 

(function ($) {    $.extend({        LoadImg: function (option) {            var defaults = {                imgAttribute: "imgurl",                speeds: 300,                opacitys: 1            }            var options = $.extend(defaults, option);            $(window).bind("scroll load resize", initImg);             function initImg () {                var imgnum = $("img[" + options.imgAttribute + "]");                var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;                var iClientHeight = document.documentElement.clientHeight + iScrollTop;                var wintop = iScrollTop + iClientHeight; //捲軸滾動和可視化地區高度                if (imgnum.length) {                    for (var i = 0; i < imgnum.length; i++) {                        var imgOffsetTop = imgTop(imgnum[i]);                        var imgoffsetHight = imgOffsetTop + imgnum[i].offsetHeight;                        if (iClientHeight >= imgOffsetTop || wintop >= imgOffsetTop) {                            loadimg(imgnum[i]);                        }                    }                } else {                    $(window).unbind("scroll load resize", initImg);                }            }            ///載入圖片            function loadimg(img) {                $(img).attr("src", $(img).attr("imgurl"));                $(img).removeAttr("imgurl");                $(img).css("opacity", 0);                $(img).css("filter", "alpha(opacity=0)");                $(img).fadeTo(options.speeds, options.opacitys);            }            //圖片到表單top的高度             function imgTop (element) {                return element.offsetTop + (element.offsetParent ? arguments.callee(element.offsetParent) : 0);            }        }    })})(jQuery);要消極式載入圖片的最下面。    $.LoadImg({        imgAttribute: "imgurl",        speeds: 300,        opacitys: 1    })

 

　　

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More