jQuery手机：动态添加图像

我想加载一个静态的街景图像，其中各种参数存储在mysql数据库中。尝试了很多选择之后，我现在将数据库数据传递给一个JavaScript变量，然后尝试构建相关的URL（考虑到一路上的页面宽度）。jQuery手机：动态添加图像

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

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

但是，如果我从这个页面开始浏览并浏览所有将来的链接到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>

来源

2013-03-16 Simon H

尝试将其绑定到'pagebeforeshow'。 – Omar 2013-03-16 17:28:10

不，没有帮助。我也尝试使用'.attr（'src'，...）'来直接改变照片，并且它只能在restaurant.php被jqm/ajax加载而不是直接加载（或者在页面刷新） – 2013-03-17 11:03:28

我要承认我不是这里的专家，但你这样做的方式似乎并不完全正确，我会做以下事情：

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前一段时间开始，但我知道这个工程的一个程序，我已经做了

EDIT（并为PhoneGap的构建呢！）：另外我会认真考虑把一切都在一个HTML文档就像你开发的这种方式一样，如果你试图将它作为一个移动应用程序来构建，会导致你大量的流鼻血，JQM的设计目的不是像Jquery那样使用，所有的“页面”应该存在于一个单独的html文档中，然后使用导航功能在页面之间移动。

感谢

马克

来源

2013-03-17 12:00:03

添加数据的Ajax = “假” 或相对= “外部” 你的链接..这应该使它正确加载

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

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

来源

2013-03-18 19:45:43 krilovich

jQuery手机：动态添加图像

回答

相关问题