代码之家 › 专栏 › 技术社区 › Amr Badawy

当向下滚动到页面图像时,是否能够部分加载页面图像,或者它只是有效的?

asp.net

Amr Badawy · 技术社区 · 14 年前

我在一些网站上注意到了,比如 http://mashable.com 当您打开页面并尝试滚动它时,当您到达它时,它似乎会加载图像。我不知道这是一个闪烁的效果,还是真的是为了减少图像的负载直到滚动到它?

3 回复 | 直到 14 年前

Daniel Dyson 14 年前

这是一个让你开始的脚本。您需要对图像URL做些什么,而不仅仅是显示它们,但是我相信您会发现这一点…

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

Darin Dimitrov 14 年前

这个站点的工作方式是在页面加载和滚动时对所有图像应用不可见样式。 display: block 具有 some effect .

Zote 14 年前

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

一些事件示例 here .

推荐文章

Community wiki · 为什么使用DirectoryEntry对LDAP进行身份验证会间歇性地抛出COMException(0x8007203A):“服务器不可操作”?

1 年前

PixelScribe · 实体框架EDMX未更新ASP.NET web应用程序中的连接字符串

1 年前

Hua Deng · page_load中的调用方法导致adapter.fill()上出现StackOverflowException,但在其他地方调用时没有问题

1 年前

WingiM · REST API-如何实现具有相同名称但可接受参数类型不同的多个方法

1 年前

Community wiki · 基于两个参数在文本框中使用上下文键自动完成?

1 年前

NAM3L3SSRJ · 如何在C语言中创建一个方法或函数,在超市销售时减少数据库中的库存

2 年前

Javad A salehi · C#如何解析“MyValue”的动态值

2 年前

AlÄ±yev Rufet · 无法构造某些服务(验证服务描述符的服务类型时出错:Restaurant.Data.IAppRepository

2 年前

Geoff · 从Microsoft Identify Platform获取访问令牌

2 年前

Haim Ohayon · 这些链接之间有什么区别?

2 年前