Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

    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;

Answer 2

完整图片的来源是错误的。您将其设置为缩略图的来源，即显示的内容。您需要从拇指中获取文件名，然后使用正确的路径获取完整图像。您声明拇指和完整图像不在同一位置，因此设置为拇指源的完整只会再次生成拇指图像。

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

2 个答案: