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手機：動態添加圖像

回答

相關問題