中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

當(dāng)滾動(dòng)條條滾動(dòng)到圖片位置再顯示圖片，像淘寶，京東等網(wǎng)站都采用了這樣的js技術(shù)，這樣可以是帶寬使用減少，也可以增加用戶體驗(yàn)。

下面將滾動(dòng)條到圖片才能顯示圖片的構(gòu)思說(shuō)一下:

即:當(dāng)滾動(dòng)條滾動(dòng)時(shí)出發(fā)檢查事件,檢查每一個(gè)圖片位置，當(dāng)圖片距離頁(yè)面頂部位置小于滾動(dòng)條加上瀏覽器高度時(shí)，則圖片進(jìn)行顯示輸出

jquery代碼如下

首先將圖片，設(shè)置一個(gè)value屬性，讓其為真實(shí)圖片位置值，設(shè)置另一個(gè)src為一個(gè)小圖片為等待圖片。當(dāng)圖片達(dá)到圖片位置時(shí)，將value值賦給src即可。

$(function(){

 $(window).scroll( function() { 

  $("img").each(function(i){

    if($(this).offset().top<($(window).height()+document.documentElement.scrollTop-200)){

    $(this).attr("src",$(this).attr("value"));

   }

 });

 });

});

解釋一下上面的代碼，本代碼采用jquery弄的， offset().top是獲取圖片距離頂部高度當(dāng)小于滾動(dòng)條滾動(dòng)距離document.documentElement.scrollTop加上瀏覽器高度$(window).height()時(shí)則進(jìn)行顯示，在這里-200是為了看效果，當(dāng)圖片出來(lái)200像素的 時(shí)候才進(jìn)行圖片顯示

網(wǎng)上采用了jquery的jquery.lazyload.js公開組件，代碼如下：

$(function(){

  $("img").lazyload({

      placeholder : "默認(rèn)等待圖片",

      effect      : "fadeIn"

      });

});

采用的jquery的組件：下載lazyload.js

<script language="javascript" src="jquery.lazyload.js"></script>

這就是當(dāng)滾動(dòng)條到圖片處才顯示圖片的代碼。

更多信息請(qǐng)查看IT技術(shù)專欄