javascript - 当用户单击缩略图时如何显示完整图像 ASP.NET

Question

我创建了一个程序，可以查找本地存储的图像并将其显示在网站上。然而，我注意到，当我只是重新调整原始图像的大小并将它们用作拇指时，加载时间非常荒谬，因为实际图像非常大。
我有一个文件夹，将这些图像存储为与原始文件同名的拇指，如何在单击拇指时加载原始文件，因为现在它仅加载拇指或基于“onclick”我放入JS中。

      < script type = "text/javascript" >
       function Test(url) {
         var img = new Image();
         var bgDiv = document.getElementById("divBackground");
         var imgDiv = document.getElementById("divImage");
         var displayFull = document.getElementById("displayFull");
         var imgLoader = document.getElementById("imgLoader");
         imgLoader.style.display = "block";
         img.onload = function() {
           displayFull.src = img.src;
           displayFull.style.display = "block";
           imgLoader.style.display = "none";
         };
         img.src = url;
         var width = document.body.clientWidth;
         imgDiv.style.display = "block";
         bgDiv.style.display = "block";
         return false;
       } < /script>

<Nodes>
  <asp:TreeNode Text="Niagara Frontier" Value="Niagara Frontier" Expanded="False" SelectAction="Expand">
    <%--<asp:TreeNode Text="2006" Value="2006" Selected="True"></asp:TreeNode>--%>
  <asp:TreeNode Text="2006" Value="2006"></asp:TreeNode>
  <asp:TreeNode Text="2007" Value="2007"></asp:TreeNode>
  <asp:TreeNode Text="2008" Value="2008"></asp:TreeNode>
  </asp:TreeNode>
  <asp:TreeNode Text="Strabag Office Picture folder" Value="Strabag Office Picture folder" SelectAction="Expand"></asp:TreeNode>
</Nodes>


<asp:Repeater ID="RepeaterImages" runat="server" Visible="False">
  <ItemTemplate>
    <asp:ImageButton ID="Image" runat="server" ImageUrl='<%# Container.DataItem%>' ImageAlign="TextTop" Height="100px" Width="150px" Title="Click to Enlarge" OnClientClick="return Test(this.src)" Visible="False" />
  </ItemTemplate>
</asp:Repeater>

<asp:Repeater ID="RepeaterThumbs" runat="server" Visible="False">
  <ItemTemplate>
    <asp:ImageButton ID="Image" runat="server" ImageUrl='<%# Container.DataItem%>' ImageAlign="TextTop" Height="100px" Width="150px" Title="Click to Enlarge" OnClientClick="return Test2(this.src)" Visible="True" />
  </ItemTemplate>
</asp:Repeater>

    protected void Page_Load(object sender, EventArgs e)
{
    try
    {
        string textVal = TreeView1.SelectedNode.Text;

        RepeaterImages.Visible = true;
        string[] img = Directory.GetFiles(Server.MapPath("~/Images/" + textVal));
        List<String> images = new List<string>(img.Count());

        foreach (string item in img)
        {
            images.Add(String.Format("~/Images/" + textVal + "/{0}", System.IO.Path.GetFileName(item)));
        }

        RepeaterImages.DataSource = images;
        RepeaterImages.DataBind();

        RepeaterThumbs.Visible = true;
        string[] imgthumb = Directory.GetFiles(Server.MapPath("~/Images/Thumbs/" + textVal));
        List<String> imagesthumb = new List<string>(imgthumb.Count());

        foreach (string item2 in imgthumb)
        {
            imagesthumb.Add(String.Format("~/Images/Thumbs/" + textVal + "/{0}", System.IO.Path.GetFileName(item2)));
        }

        RepeaterThumbs.DataSource = imagesthumb;
        RepeaterThumbs.DataBind();
    }

Answer 1

我通过使用JS剪掉指向缩略图的图像引用部分来解决这个问题。 JS 现在指向根 Images 文件夹并在单击时加载这些图像。

        function Test2(url) {
            var img = new Image();
            var bgDiv = document.getElementById("divBackground");
            var imgDiv = document.getElementById("divImage");
            var displayFull = document.getElementById("displayFull");
            var imgLoader = document.getElementById("imgLoader");
            imgLoader.style.display = "block";
            img.onload = function() {
              displayFull.src = img.src.replace("Thumbs/", ""); <--- Here
              displayFull.style.display = "block";
              imgLoader.style.display = "none";
            };

img.src = url;