javascript - 用于测试预加载器(带有图像和延迟)未正确延迟的 ASP.NET ASHX 处理程序

Question

我正在开发我的个人网站，并且我有一个画廊，我需要在其中实现预加载器。为了测试，我决定制作自己的 .ashx 处理程序来测试图像加载(使用简单的 Thread.Sleep() 来模拟网络延迟)，但 Firefox 不会在加载完成时一一显示它们，而是一次性显示它们。这很奇怪，因为要显示图像的地方没有表格，只有 div，所以它们应该即时显示。

但在随机情况下，它会显示 3 个，然后显示另外 2 个(假设我有 5 张图像)。我希望它们以随机间隔加载，但我不知道我的代码中可能有什么问题。

这是我的 .ashx 代码:

<%@ WebHandler Language="C#" Class="GetImg" %>
using System.IO;
using System.Web;
using System.Text;

public class GetImg : IHttpHandler
{
    public bool IsReusable { get { return true; } }

    public void ProcessRequest(HttpContext ctx)
    {
        System.Threading.Thread.Sleep(new System.Random((int)System.DateTime.Now.Ticks).Next(5) * 1000);
        ctx.Response.ContentType = "image/jpg";
        ctx.Response.BinaryWrite(File.ReadAllBytes(HttpContext.Current.Server.MapPath("~/test.jpg")));
    }
}

预先感谢你们提供的所有帮助:)

Answer 1

您的浏览器开始并行下载图像；没有理由等待第一张图片才要求第二张!

您的网络服务器也会为每个请求启动一个 session (和一个线程)。因此，两个 session 在同一秒开始，并一起等待 5*1000...并在同一时刻发送响应。

你可以想一些技巧:
- 在服务器中实现一个队列(使用Context.Application使线程相互通信)，以便可以按顺序提供图像
- 使用随机数而不是 System.DateTime.Now.Ticks 来实现随机延迟

但实际行为是模拟由服务器提供的具有相同延迟时间的许多图像的真实情况。