element.html() 调用时出现痉挛的 img 结果答案

【问题标题】：Spastic img results on element.html() callelement.html() 调用时出现痉挛的 img 结果
【发布时间】：2016-05-22 16:38:33
【问题描述】：

这个问题需要理解 2 个组成部分

问题声明

GetProdImage.cs

   //Retrieves image from db based on id
    int id = Page.RouteData.Values["prod_id"];
    Controller controller = new Controller();

    DBContext context = GetDBContext();

    ProductImage productImage = controller.GetImage(id);

    context.Response.Clear();
    context.Response.ContentType = "image/"+productImage.ImageExt;
    context.Response.BinaryWrite(productImage.bindata);
    context.Response.Flush();

JQuery HTML 构建

<script>
                function ihatemylife()
                {
                    debugger;
                    var html = "<img src=\"http://localhost:3756/GetProdImage/10\" style=\"max-width: 200px;\"/>" +
                     "<img src=\"http://localhost:3756/GetProdImage/11\" style=\"max-width: 200px;\"/>" +
                    " <img src=\"http://localhost:3756/GetProdImage/12\" style=\"max-width: 200px;\"/>";

                    $("#sm-test").html(html);
                }

                });
    </script>
        <div id="sm-test"></div>

请注意，每张图片都只是一个红色数字。
它使用标准插入到 DOM 元素中

$(element).html(html);

这个构建产生了这个：
每列都是一次页面刷新。请注意顺序是如何不同的。

检查页面（证明 html 是正确的）

调试信息

如果在 GetProdImage.cs 中放置断点，您可以看到在插入 html 时调用了它。奇怪的是 id 的值反映了图像的痉挛顺序，而不是 html 中反映的内容。
即第一次迭代 GetProdImage 用 12、10、12 调用第二次迭代它被称为 11,12, 12 等

这个观察让我觉得这是我的 jQuery 实现的问题。

如果访问 GetProdImage 的每个 url，它将生成正确的图像。

所以要测试一下：

如果我将 GetProdImage() 全部剪掉，并将硬编码的 img src 值用于公共图像，如下所示：

    html += "<td><img title=\"" + i + "\" src=\"https://upload.wikimedia.org/wikipedia/commons/d/d0/DJCTQ_-_10.JPG\" />" +
"<img title=\"" + i + "\" src=\"https://upload.wikimedia.org/wikipedia/commons/9/9d/French_Military_Button_Rgmt_Number_11.jpg\"/>" +  " <img title=\"" + i + "\" src=\"http://thumb1.shutterstock.com/display_pic_with_logo/569284/257460898/stock-photo-number-257460898.jpg\""/></td>";

结果令人惊讶：
每次图像的顺序都正确。

我相信我的矛盾现在很清楚了。

从评论中调试 1) 直接放置在页面上的标签，而不是通过使用 GetProdImage 作为 src 的 jquery 调用每次都正常工作。

2) 调用 jquery 的页面的 Turing EnableSessionState="false" 无效。

问题

什么会导致 GetProdImage 的行为以随机顺序接收（和返回）图像？
收到的随机数表明 JQuery 有问题。
硬编码的 img src 指向 GetProdImage。

我很笨。

这些是我的问题。

【问题讨论】：

jQuery 只是设置 html 代码，您的后端是生成实际图像内容的那个。问题可能出在您的后端。 Page.RouteData.Values["prod_id"] 实际上没有得到正确的 id，或者 controller.GetImage(id) 没有正确检索您的图像数据
@PatrickEvans 编辑并添加了图像以显示 GetProdImage 确实运行正常。
硬编码 img html 会发生什么？即<td><img src=".../GetProdImage/10"><img src=".../GetProdImage/11"><img src=".../GetProdImage/12"></td>？它是否以正确的顺序显示？
@PatrickEvans 是的，如果标签直接放在页面上，而不是通过 jquery 调用，它们会按顺序显示。
你在所有调用中都使用 session 吗？，如果是的话。为该页面和调用禁用它，如果工作正常，我将详细解释它...

标签： javascript jquery asp.net image src

【解决方案1】：

问题就在这里
GetProdImage.cs

int id = Page.RouteData.Values["prod_id"];

要设置 ID 时发生了竞争条件。
我将其更改为 HttpContext 驱动而不是 REST。

【讨论】：