jQuery mobile：动态添加图片答案

【问题标题】：jQuery mobile: Dynamically add imagejQuery mobile：动态添加图片
【发布时间】：2013-03-16 14:56:18
【问题描述】：

我正在尝试加载静态街景图像，其中各种参数存储在 mysql 数据库中。在尝试了很多替代方案之后，我现在将数据库数据传递给一个 javascript 变量，然后尝试构建相关的 URL（同时考虑到页面宽度）。

页面加载为 restaurant.php?r=xyz，其中 xyz 在 MySQL 上查找以返回传递到 javascript 数组的一行数据 $r。一些数组字段用于创建 Google 街景静态图像的 URL，然后应将其加载到页面中。

如果我在网站上的其他地方（或在页面刷新后）进入该页面的获取，这将正常工作。

但是，如果我从这个页面开始并浏览所有未来指向 restaurant.php?r=abc 的链接，请不要加载图像（它已下载并且可以在 Chrome 源代码框中看到）。 pageinit 事件触发，但 .html() 未能更改内容（但未报告错误）。

我怀疑我违反了 javascript 和 jquery mobile 的几项法律......

在标题中声明

var resto = {};

 function insertSVPhoto() {
        console.log("insertSVPhoto: Loaded data for: "+resto['rname']);
        if ( Math.round(resto['heading']) != 0) {
            var width = Math.round( $(document).width() * .9);
            var s= "x250&location="+resto['lat']+",%20"+resto['lng']+"&fov=60&heading="+resto['heading']+"&pitch="+resto['pitch']+"&sensor=false";
            var photo = "<img src='http://maps.googleapis.com/maps/api/streetview?size="+width+s+"'>";
            console.log("Loading photo: "+photo);
            $('#svphoto').html(photo);
        } else { 
            console.log('No photo available');
            $('#svphoto').html("<img src=''>");
        }
    }

然后在下面我有

<div data-role="page" data-add-back-btn="true">
<script type="text/javascript" >
<?php
    echo "resto = ".json_encode($r).";"; 
?>
$( document ).on("pageinit", insertSVPhoto );
</script>
    <div id='svphoto'></div>

【问题讨论】：

尝试将其绑定到pagebeforeshow。
不，没有帮助。我也尝试过使用.attr('src', ...)直接更改照片，并且只有在jqm/ajax加载restaurant.php而不是直接加载（或页面刷新后）时它才能可靠地工作

标签： php json jquery-mobile dynamic page-init

【解决方案1】：

我必须承认我在这里不是专家，但你这样做的方式对我来说似乎不太正确，我会做以下事情：

   window.onload = function () {
   if(! window.device)
     deviceReady()
    }

    document.addEventListener("deviceReady", deviceReady, false);

    function deviceReady() {
     $(document).delegate('#YOUR_PAGE_ID', 'pageshow', function () {

      // Add your stuff here for doing the photo....
    }

同样，我刚刚开始使用 JQM，但我知道这适用于我已经完成的应用程序（也适用于 phonegap 构建！）

编辑：另外，我会认真考虑将所有内容都放在一个 HTML 文档中，如果您尝试将其构建为移动应用程序，这将导致您流鼻血使用与 Jquery 相同的方式，您的所有“页面”应该存在于一个单独的 html 文档中，然后使用导航功能在页面之间移动。

谢谢

马克

【讨论】：

【解决方案2】：

将 data-ajax="false" 或 rel="external" 添加到您的链接中......这应该可以使其正确加载

<a href="hello" data-ajax="false">hello</a>

或

<a href="hello" rel="external">hello</a>

【讨论】：