當向下滾動頁面圖像時是否有能力加載頁面圖像，或者它只是影響？

我在一些網站如http://mashable.com已經注意到，當你打開網頁，並嘗試滾動，它似乎加載圖片，當你達到它..我不知道這是否是一個公正的閃爍效果，或者真的做是爲了直到滾動它的圖像負載更少？當向下滾動頁面圖像時是否有能力加載頁面圖像，或者它只是影響？

來源

2010-05-23 Amr Badawy

這是一個腳本，讓你開始。你需要做一些與圖片網址，而不是隻顯示他們，但我敢肯定，你會想出解決辦法...

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css" > 
    div { border: solid 1px black; height:200px; } 
    </style> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
</head> 
<body> 
    <script type="text/javascript"> 
     var pixelsBetweenImages = 200; 
     var imagesArray = {} 
     var imagesArray = new Array(); // regular array (add an optional integer argument to control array's size) 
     imagesArray[0] = ""; 
     imagesArray[1] = ""; 
     imagesArray[2] = ""; 
     imagesArray[3] = "/images/ImageThree.gif"; 
     imagesArray[4] = "/images/ImageFour.gif"; 
     imagesArray[5] = "/images/ImageFive.gif"; 
     imagesArray[6] = "/images/ImageSix.gif"; 
     imagesArray[7] = "/images/ImageSeven.gif"; 
     imagesArray[8] = "/images/ImageEight.gif"; 

     $(window).scroll(function() { 
      var scrollpos = $(window).scrollTop() + $(window).height(); 
      var imageIndex = Math.floor(scrollpos/pixelsBetweenImages); 
      if (imagesArray[imageIndex] != "") { 
       var div = $("#" + imageIndex); 
       div.html(imagesArray[imageIndex]); 
       imagesArray[imageIndex] = ""; 
      } 

     }); 
    </script> 

    <div>Visible on first load</div> 
    <div>Visible on first load</div> 
    <div>Visible on first load</div> 
    <div id="3">3&nbsp;</div> 
    <div id="4">4&nbsp;</div> 
    <div id="5">5&nbsp;</div> 
    <div id="6">6&nbsp;</div> 
    <div id="7">7&nbsp;</div> 
    <div id="8">8&nbsp;</div> 

</body> 
</html>

來源

2010-05-23 07:07:27

我想知道，如果這是一個新的設計模式，使我們不加載頁面加載的所有圖像，以減少交通和需要，所以我們可以在這樣的情況下，申請（含評論文章） – 2010-05-23 07:31:01

我已經完全時只加載它基於你的意見，改變了我對你問題的回答。 – 2010-05-23 22:14:14

它似乎接近我在這樣的網站中看到的..謝謝丹尼爾 – 2010-05-24 05:41:46

您可以將您的負載/下載圖像功能滾動事件。

一些事件示例here。

來源

2010-05-23 07:09:27 Zote

本網站的做法是在頁面加載時對所有圖像應用隱形樣式，並在滾動時應用display: block和some effect。

來源

2010-05-23 07:13:25

是否意味着你看到這只是一個正義效果（對於本網站上的任何其他工作在相同的技術）？ – 2010-05-23 07:33:31

在這個網站的情況下，這只是一個效果。滾動時不會發送服務器請求。 – 2010-05-23 07:49:25

你知道這樣的情況，但與服務器請求發送時滾動嗎？ – 2010-05-23 08:07:43

當向下滾動頁面圖像時是否有能力加載頁面圖像，或者它只是影響？

回答

相關問題