回发后填充图像问题

Question

我遇到以下问题：

单击按钮时我想填充图像源并在 ModalPopupExtender 内显示图像。 为了打开 ModalPopupExtender，我调用 __doPostBack ，这会导致 UpdatePanel 进行回发并显示其中包含图像的适当视图。

 <script src="jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    window.pageLoad = function () {
        $addHandler($get('btn1'), 'click', function (e) {
            __doPostBack('pbcTest', '');
            // setTimeout("PopulateImage()", 100);
            PopulateImage();
            $find('<%=mpePopup.ClientID%>').show();
            e.preventDefault();
        });
    }

    function PopulateImage() {
        $(".testImage").attr("src", "6.jpg");
    }

</script>

<ajaxtoolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" CombineScripts="false">
    </ajaxtoolkit:ToolkitScriptManager>
    <button id="btn1"> Click</button>
    <asp:LinkButton ID="lbTest" runat="server" Text="show popup" Style="display: none;" />
    <ajaxtoolkit:ModalPopupExtender runat="server" ID="mpePopup" TargetControlID="lbTest"
        PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" CancelControlID="lbClose" />
    <asp:Panel runat="server" ID="pnlPopup" CssClass="modalPopup">
        <asp:LinkButton runat="server" ID="lbClose">Close</asp:LinkButton>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:MultiView runat="server" ID="mvPopup">
                    <asp:View ID="View1" runat="server">
                        <img class="testImage" />
                    </asp:View>
                </asp:MultiView>
                <cs:PostBackControl runat="server" ID="pbcTest" OnCallBack="pbcTest_CallBack" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Panel>

 protected void pbcTest_CallBack(object sender, CallBackEventArgs e)
    {
        mvPopup.ActiveViewIndex = 0; 
    }

如果在 __doPostBack 之后我立即调用 PopulateImage()，图像是空的（尽管 PopulateImage() 被调用并且图像出现了一段时间，但消失后，可以在萤火虫中看到）。

但是如果我设置超时 setTimeout("PopulateImage()", 100); 图像就会显示出来。

造成这种行为的原因是什么？

Answer 1

如果您希望始终在 UpdatePanel 完成刷新后调用 PopulateImage();，您应该通过注册要在 UpdatePanel 之后执行的函数来实现此目的> 已加载。加载页面时，您可以通过在 javascript 中执行以下操作来注册您的函数：

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PopulateImage);

我认为您可能遇到同步问题，在 PopulateImage()UpdatePanel 刷新> 代码已运行，因此它会替换它。