jQuery移动版:动态添加图像


jQuery mobile: Dynamically add image

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

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

如果我在网站的其他地方(或在页面刷新后)输入该页的get,则可以正常工作。

但是,如果我从这个页面开始,浏览所有到restaurant.php的链接?r=abc不加载图像(它是下载的,可以在Chrome源代码框中看到)。pageinit事件触发,但.html()无法更改内容(但没有报告错误)。

我怀疑我违反了javascript的几条法律,jquery移动....

头文件

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>

我必须承认我不是这方面的专家,但你这样做的方式对我来说似乎不太对,我会这样做:

   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

添加data-ajax="false"或rel="external"到您的链接。这样就能正常加载了

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

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