ansaurus

Question

Is there ability to load page images partially when scroll down to it or is it just effect ?

Answer 1

+1 A:

Here is a script to get you started. You'll need to do something with the image urls rather than just displaying them, but I'm sure you will figure this out...

<!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"&gt;&lt;/script&gt;
</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>

Daniel Dyson 2010-05-23 07:07:27

i want to know if this is a new design pattern that allow us not to load all images in page load to decrease traffic and just load it when needed so we can apply in such case ( posts with comments )

Space Cracker 2010-05-23 07:31:01

I have completely changed my answer to your question, based on your comments.

Daniel Dyson 2010-05-23 22:14:14

it's seems near what i see in such site .. thanks Daniel

Space Cracker 2010-05-24 05:41:46

Answer 2

A:

you can attach your load/download image function to scroll event.

Some event sample here.

Zote 2010-05-23 07:09:27

Answer 3

+1 A:

The way this site does it is to apply an invisible style to all the images at page load and when scrolling it applies display: block with some effect.

Darin Dimitrov 2010-05-23 07:13:25

is it mean that you see such this is a just effect only ( for this site on any other that work in the same technique ) ?

Space Cracker 2010-05-23 07:33:31

In the case of this site it is just an effect. No server requests are sent when scrolling.

Darin Dimitrov 2010-05-23 07:49:25

Do u know if such a case but with server request send while scrolling ?

Space Cracker 2010-05-23 08:07:43

Take a look at this plugin: http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin

Darin Dimitrov 2010-05-23 08:11:01

nice one for such function

Space Cracker 2010-05-24 05:40:40

ansaurus

tags:

views:

answers:

Is there ability to load page images partially when scroll down to it or is it just effect ?

related questions