페이지 이미지를 스크롤 할 때 페이지 이미지를 부분적으로로드 할 수 있습니까?

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

나는 이것이 새로운 디자인 패턴인지 알고 싶습니다. 트래픽을 줄이기 위해 페이지로드시 모든 이미지를로드하지 않아도되고 필요할 때로드해야합니다. 그런 경우에 적용 할 수 있습니다 (댓글이있는 게시물) –

나는 완전히 귀하의 의견에 따라 귀하의 질문에 대한 내 대답을 변경했습니다. –

그것은 내가 볼 수있는 사이트 근처에있는 것 같습니다. Daniel –

당신이 이벤트를 스크롤 부하/이미지 다운로드 기능을 첨부 할 수 있습니다 ... 당신은 오히려 단지 그들을 표시하는 것보다 이미지 URL로 뭔가를해야합니다,하지만 난 당신이 알아낼 것이라 확신합니다.

일부 이벤트 샘플 here.

출처

2010-05-23 07:09:27 Zote

페이지로드시 모든 이미지에 보이지 않는 스타일을 적용하고 스크롤 할 때 some effect과 함께 display: block을 적용합니다.

출처

2010-05-23 07:13:25

덕분에 이것이 같은 효과가있는 것을 볼 수 있습니다 (동일한 기술에서이 사이트의 다른 사이트에서도). –

이 사이트의 경우 그것은 단지 효과 일뿐입니다. 스크롤 할 때 서버 요청이 전송되지 않습니다. –

그런 경우는 있지만 서버 요청이 있으면 스크롤하는 동안 알 수 있습니까? –

페이지 이미지를 스크롤 할 때 페이지 이미지를 부분적으로로드 할 수 있습니까?

답변

관련 문제