jQuery Blind Onload是一種優化圖片加載的方式。通常情況下,在頁面加載時所有圖片都會一次性加載,這會導致頁面加載速度緩慢。而采用jQuery Blind Onload技術,只有當圖片在可視區域內才會被加載。
// jQuery Blind Onload 示例代碼 $(function(){ var images = $("img.blind-onload"); images.css("opacity", "0"); // 隱藏所有圖片 $(window).scroll(function() { images.each(function() { var image = $(this); var windowHeight = $(window).height(); var windowScrollTop = $(window).scrollTop(); var imagePosition = image.offset().top; if(imagePosition< (windowHeight + windowScrollTop)) { // 圖片已進入可視范圍內,開始加載圖片 image.animate({ opacity: 1 }, 1000, function() { image.css("opacity", "1"); }).attr("src", image.attr("data-src")); } }); }); });
在上述示例代碼中,第一步是隱藏所有要延遲加載的圖片。然后,設置window對象的滾動事件,檢查每個圖片是否已進入可視范圍內。如果圖片已經進入可視范圍內,則設置圖片透明度為1,并動畫加載圖片,最后將圖片透明度重新設置為1。
由于jQuery Blind Onload只加載可視區域內的圖片,因此可以大大提高頁面加載速度,同時也可以減少服務器帶寬的負載。
上一篇jquery bink
下一篇哪些軟件會用CSS