用戶單擊縮略圖ASP.NET時如何顯示完整圖像

Question

我創建了一個程序，用於查找本地存儲的圖像並將其顯示在站點上。 但是，我注意到當我只是調整原始圖像的大小並將其用作拇指時，加載時間是荒謬的，因為實際圖像很大。
我有一個文件夾，將這些圖像存儲為與原始文件同名的縮略圖，單擊縮略圖時如何獲取它以加載原始文件，因為現在它僅加載縮略圖或基於圖像的完整圖像。我放入JS中的“ onclick”。

  < 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現在指向根圖像文件夾，並在單擊時加載這些圖像。

  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

完整圖像的來源是錯誤的。 您將其設置為正在顯示的縮略圖的來源。 您需要從縮略圖中獲取文件名，然后為完整圖像使用正確的路徑。 您聲明拇指和完整圖像不在同一位置，因此將“完全”設置為拇指源只會再次產生拇指圖像。