1

我希望在页面加载之前简单地隐藏和图像，然后在页面加载后显示图像。问题是当我尝试显示图像时它根本不显示图像。

这是我的html代码：

<body>

    <div id ="splash" data-role="page">
        <center>
            <div id='class'> <img src="BookBayText.png"></div>
            <div id='book'> <img src="Book.png"></div>
        </center>
    </div>

</body>

这是我的 javascript/jquery 手机：

<script type="text/javascript">

        $(document).on('pagebeforeshow','#splash',
            function()
            {
                $("#book").hide();
            });

        $(document).on('pageinit','#splash',
            function(){

                setTimeout(
                    function()
                    {
                        $("#class").animate({top: "1em"}, 'slow');
                    },3000);

                //For some reason this line below doesn't run
                $("#book").show();

        });
    </script>

任何想法为什么这不起作用？

4

2 回答 2

0

我设法通过以下代码获得了我想要的效果：

setTimeout(
   function()
   {
      $("#class").animate({top: "1em"}, 'slow');
      $("#book").show();
   },2000);

基本上我$("#book").show();把这条线移到了 setTimeout 函数中。但它仍然让我有点迷失为什么代码不会在函数之外显示图像。如果任何对此有答案的人可以更新此答案，那将不胜感激。

于 2013-08-24T21:32:58.603 回答
0

有点类似于pageinit 上的这篇文章 jQuery mobile popup。

尽管该帖子归咎于浏览器的延迟，但对我来说，仍然不清楚它为什么会这样做。我从来没有经历过这样的行为。

  1. 我想知道如果您进行以下更改会怎样：
  2. 将您的中心标签放在数据角色中：内容，
  3. 将 pageinit 替换为 pageshow。
  4. 在 pageinit 或 pageshow（不是 settimeout）中按如下方式搜索您的 iem。

>

 var elem = $("[data-role='page']:last").find('#book img'); // others may use $.mobile.activePage

if (elem.length) {
   // check height or img width here...
}
于 2013-08-24T22:45:03.513 回答