当向下滚动页面图像时是否有能力加载页面图像，或者它只是影响？

我在一些网站如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

当向下滚动页面图像时是否有能力加载页面图像，或者它只是影响？

回答

相关问题