簡體   English   中英

在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();

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 as src通過jquery調用加載,每次都能正常工作。

2)對於調用jquery的頁面,Turing EnableSessionState =“ false”無效。

是什么會導致GetProdImage的行為以隨機順序接收(和返回)圖像?
接收到的隨機數表明JQuery有問題。
硬編碼的img src指向GetProdImage。

我很笨

這些是我的問題。

問題在這里
GetProdImage.cs

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

設置ID發生了競爭情況。
我將其更改為HttpContext驅動,而不是REST。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM