javascript - 回发问题后填充图像

Question

我有以下问题:

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

 <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() 被调用并且图像出现一段时间，但在消失之后，可以在 firebug 中看到)。

但是如果我设置一个超时 setTimeout("PopulateImage()", 100); 图像就会出现。

这种行为的原因可能是什么？

Answer 1

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

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

我认为您可能遇到了同步问题，您的 UpdatePanel 刷新发生在您的 PopulateImage() 代码运行之后，因此它会替换它。