Question

我在http://mashable.com这样的网站上发现，当你打开页面并尝试滚动它时，它会在你到达时加载图像..我不知道它是否只是一个闪烁的效果或者在滚动到图像之前，这样做是为了减少图像负载吗？

Answer 1

这是一个可以帮助您入门的脚本。您需要对图片网址执行某些操作，而不是仅仅显示它们，但我相信您会想到这一点......

<!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>

Answer 2

此网站的工作方式是在页面加载时对所有图片应用隐形样式，滚动时将display: block应用于some effect。

Answer 3

您可以附加加载/下载图像功能以滚动事件。

某些事件样本here。

向下滚动页面图像是否有能力部分加载页面图像，还是只有效果？

3 个答案: