Php jquerymobile:动态添加图像

Php jquerymobile:动态添加图像,php,json,jquery-mobile,dynamic,page-init,Php,Json,Jquery Mobile,Dynamic,Page Init,我正在尝试加载静态街景图像,其中各种参数存储在mysql数据库中。在尝试了很多替代方法之后,我现在将数据库数据传递给一个javascript变量,然后尝试构建相关的URL(考虑沿途的页面宽度) 页面加载为restaurant.php?r=xyz,其中在MySQL上查找xyz以返回一行数据$r,该行数据被传递到javascript数组中。一些数组字段用于创建Google Street view静态图像的URL,然后应将其加载到页面中 如果我在网站的其他地方(或在页面刷新后)开始进入get to T

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

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

如果我在网站的其他地方(或在页面刷新后)开始进入get to This page(获取此页面),则此功能可以正常工作

但是如果我从这个页面开始,浏览所有指向restaurant.php?r=abc的链接,不要加载图像(它是下载的,可以在Chrome sources框中看到)。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=''>");
        }
    }
var resto={};
函数insertSVPhoto(){
log(“insertSVPhoto:Loaded data for:”+resto['rname']);
if(数学圆整(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=“”;
控制台日志(“加载照片:+照片”);
$('#svphoto').html(照片);
}否则{
console.log(“没有可用的照片”);
$('#svphoto').html(“”);
}
}
下面我有

<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>

$(文档)。在(“pageinit”,insertSVPhoto)上;

我必须承认我不是这里的专家,但我觉得你这样做不太合适,我会做以下几点:

   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文档中,如果你试着把它构建成一个移动应用程序,那么JQM就没有被设计成与jQuery一样的使用,你所有的“页面”都被设计成一个巨大的鼻涕。应该存在于单个html文档中,然后使用导航功能在页面之间移动

谢谢

Marc

将数据ajax=“false”或rel=“external”添加到链接中。。这应该可以使它正确加载

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



尝试将其绑定到
pagebeforeshow
。不,没有帮助。我还尝试使用
.attr('src',…)
直接更改照片,并且只有当restaurant.php由jqm/ajax加载而不是直接加载(或在页面刷新后)时,它才能可靠地工作
<a href="hello" rel="external">hello</a>