element.html() 调用时出现痉挛性 img 结果
Spastic img results on element.html() call
这个问题有 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();
JQueryHTML构建
<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 值用于 public 图像,如下所示:
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 作为源的 jquery 调用加载,每次都能正常工作。
2) Turing EnableSessionState="false" 对于调用 jquery 的页面无效。
问题
什么会导致 GetProdImage 的行为以随机顺序接收(和返回)图像?
收到的随机数指向 JQuery 有问题。
硬编码的 img src 指向 GetProdImage。
我很笨
这些是我的问题。
问题在这里
GetProdImage.cs
int id = Page.RouteData.Values["prod_id"];
要设置的 id 发生竞争情况。
我将其更改为 HttpContext 驱动而不是 REST。
这个问题有 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();
JQueryHTML构建
<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>
请注意,每张图片只是一个红色数字。
它使用标准
$(element).html(html);
这个构建产生这个:
每列都是一个页面刷新。
请注意顺序永远不会相同。
检查页面(证明html是正确的)
调试信息
如果在 GetProdImage.cs 中放置断点,您可以看到在插入 html 时会调用它。奇怪的是 id 的值反映了痉挛图像排序,而不是 html.
中反映的内容
即第一次迭代 GetProdImage 被调用为 12, 10, 12
第二次迭代调用 11,12, 12 等
这个观察让我认为这是我实施 jQuery 的问题。
如果访问 GetProdImage 的每个 url,它将生成正确的图像。
所以要测试一下:
如果我将 GetProdImage() 全部删除,并将硬编码的 img src 值用于 public 图像,如下所示:
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 作为源的 jquery 调用加载,每次都能正常工作。
2) Turing EnableSessionState="false" 对于调用 jquery 的页面无效。
问题
什么会导致 GetProdImage 的行为以随机顺序接收(和返回)图像?
收到的随机数指向 JQuery 有问题。
硬编码的 img src 指向 GetProdImage。
我很笨
这些是我的问题。
问题在这里
GetProdImage.cs
int id = Page.RouteData.Values["prod_id"];
要设置的 id 发生竞争情况。
我将其更改为 HttpContext 驱动而不是 REST。