0

I am making a simple application in which I have an image with an image map, and when I click on the image map another page loads. I am using the href property in the tag to navigate to the new page. All of this is being done on a single page.

When I click on the image map the transition should be smooth and the second page should get loaded (this is what the natural behavior should be) but what I am getting is that the page transition is choppy and also the second page isn't loaded, nothing is displayed on the screen, and the elements are displayed only after I tap a couple of times on the screen.

I tried looking for a solution but couldn't find anything.

The earlier application that I had built never ad such an issue, and all of a sudden this issue came up in the second application.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>India Stats</title>
<link href="css/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="listPage" data-role="page">
        <div data-role="header" data-position="fixed">
            Geo-spatial Analysis of Election Results in India
        </div>
        <div data-role="content">
            <div>
                <img id="Image-Maps_8201304300944558" src="img/indiamap.png" usemap="#Image-Maps_8201304300944558" />
                <map id="_Image-Maps_8201304300944558" name="Image-Maps_8201304300944558">
                <area shape="poly" coords="60,255,78,258,94,262,106,281,120,294,124,301,117,304,117,313,110,317,108,325,108,334,106,343,99,343,97,351,87,347,88,338,86,329,85,319,85,311,81,305,79,315,78,324,68,329,54,337,46,337,43,333,33,325,29,316,21,310,20,303,17,299,28,298,36,296,43,293,43,288,34,288,25,290,17,285,14,279,14,272,14,265,23,258,36,262,45,262,50,258,58,263," href="#gujarat" />
                </map>
            </div>
        </div>
        <div data-role="footer" data-position="fixed">
            Datanet Analytics &copy; Datanet India Pvt. Ltd.
        </div>
    </div>
    <div id="gujarat" data-role="page">
        <div data-role="header" data-position="fixed">
            Geo-spatial Analysis of Election Results in Gujarat
        </div>
        <div data-role="content">
            <div>
                <img id="ImageMap" src="img/gujarat.png" usemap="#ImageMaps"/>
                <map id="ImageMaps" name="ImageMaps">
                  <area shape="poly" coords="225,348,224,337,219,332,219,328,212,324,204,319,197,317,191,314,193,310,201,306,199,300,202,295,198,291,194,287,196,283,195,277,187,275,182,275,177,275,165,274,158,274,158,278,158,285,163,297,169,309,171,317,158,316,150,313,145,313,139,313,134,316,134,320,141,328,149,336,156,342,165,345,178,352,187,356,195,356,206,354,212,354,223,351" href="#junagadh">
                </map>
          </div>
        </div>
        <div data-role="footer" data-position="fixed">
            Datanet Analytics &copy; Datanet India Pvt. Ltd.
        </div>
    </div>
    <div id="junagadh" data-role="page">
        <div data-role="header" data-position="fixed">
            Geo-spatial Analysis of Election Results in Junagadh PC 2009 & ACs 2012
        </div>
        <div data-role="content">
        <img src="img/junagadh.png" />
        </div>
        <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
        <ul>
        <li style="font-size:30px"><a href="election.html">Analysis of Election Results</a></li>
        <li style="font-size:30px"><a href="cr.html">Constituencies Result of Previous Years</a></li>
        </ul>
        </div>
            Datanet Analytics &copy; Datanet India Pvt. Ltd.
        </div>
    </div>
</body>
<script src="cordova-2.7.0.js" type="text/javascript"></script>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.0.js" type="text/javascript"></script>
</html>
4

2 回答 2

1 
<script src="cordova-2.7.0.js" type="text/javascript"></script>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.0.js" type="text/javascript"></script>

请在正文加载之前添加这些行，即在“<head>”标签中，并将它们从页面底部删除，然后再次尝试加载您的页面。JS 文件应该在 body 加载之前加载，以便可以应用函数。:)

于 2013-05-10T06:22:06.920 回答
0

尝试调试应用程序。出现错误的地方。就像@Gajotres 所说。如果您的第二个页面没有加载，那么第二个页面可能存在一些问题，或者您可以使用 jQM $.mobile.changePage('#secondPage',{transition:"none"});方法来解决这个问题。我遇到过类似的问题。但我已经从应用程序中删除了所有过渡。它工作得很好。你可以试试。

于 2013-05-10T06:50:22.617 回答