Response title
This is preview!
Move this topic
Multi Page Template - prevent images downloading/caching
in jQuery Mobile
•
11 years ago
Hi,
I have a multi page template that has a number of pages within it which all work fine and as expected, but these inner pages have images that I dont want to be downloaded/cached unless the inner page is actually viewed, thus cutting down on data transfer and only using the bandwidth for the images if they are actually going to be seen.
Is there some method, call or function that can effect the image only being requested from the src location if the a specific inner page is requested/shown?
Thanks for any suggestions.
Ian
1
Replies(7)
I assume your multipages are dynamically build from some data.
If so build those pages just before showing it.
else use some junk tags like <J_Img>
and replace them before showing the page.
Leave a comment on John Chacko's reply
Hi,
The content within the html page is all present at the loading of the html page itself, so multi page content intact at the time of display. Its pre built and a static html page in effect with multiple inner pages. The inner pages each (at the moment) has a single image which I only want to be pulled if the inner page in question is actually displayed to the user.
One thing I have tried is to leave the source field for the img as blank, so src="" and then use a jquery #IMG-ID .attr - src = imagefilename (assuming that the JS will only pull the src image if the JS is displayed within the browser? hmm), which works fine in desktop Safari (correction, does not show in Desktop Safari), but under iPhone tests it shows a broken image and does not refresh the DOM I guess.
Thx for taking the time to answer me.
Ian
Leave a comment on iandmac's reply
I suggest something like below...
Not sure its best or crazy logic..... :)
And also how will it work in real device...
- < script type = "text/javascript" > $(document).bind("pagebeforechange", function (e, data) {
- if (typeof data.toPage === "string") {
- pageSelector = $.mobile.path.parseUrl(data.toPage).hash.replace(/\?.*$/, "");
- if ($(pageSelector).length) {
- $(pageSelector).find(".spn-img").each(function () {
- if ($(this).children().length == 0) {
- _img = $("<img src='" + $(this).attr("src") + "'/>");
- $(this).append(_img);
- }
- });
- }
- }
- }); < /script>
- </head >
- <body>
- <div data-role="page" id="start">
- <div data-role="header">
- <h1>Welcomezz</h1>
- </div>
- <div data-role="container">
- <a href="#imageOne" data-role="button">imageOne[Water lilies.jpg]</a>
- <a href="#imageTwo" data-role="button">imageTwo [Winter.jpg]</a>
- </div>
- </div>
- <div data-role="page" id="imageOne">
- <div data-role="header">
- <h1>Water lilies.jpg</h1>
- </div>
- <div data-role="container">
- <span class="spn-img" src="images/Water lilies.jpg" />
- </div>
- </div>
- <div data-role="page" id="imageTwo">
- <div data-role="header">
- <h1>Winter.jpg</h1>
- <span class="spn-img" src="images/Winter.jpg" />
- </div>
- </div>
- </body>
Instead of
<span class="spn-img" src="images/Winter.jpg" />
You can keep img tag itself whose default src will be a tiny blank image...
<img class="spn-img" xsrc="images/Winter.jpg" src="tinypic.gif" />
and change src with xsrc when needed
Leave a comment on John Chacko's reply
Hi again,
Thx - the
- <span class="spn-img" src="images/Water lilies.jpg" />
works a treat, but looking at the xsrc and src you suggested as well as that would allow for all of the usual img attributes to be set earlier on, so what script would you suggest for executing src - xsrc.
I attempted:
/*_img = $("<img src='" + $(this).attr("src") + "'/>");*/
$("<img src='" + $(this).attr("xsrc") + "'/>");
$("<img src='" + $(this).attr("xsrc") + "'/>");
/*$(this).append(_img);*/
But it did not like that LOL.
Thx for your advice on this, much appreciated.
Ian
Leave a comment on iandmac's reply
- $(pageSelector).find("img[xsrc]").each(function () {
- _img = $(this);
- _img.attr("src",_img.attr("xsrc"));
- _img.removeAttr("xsrc");
- });
Please update whether these works in real mobile device...
Leave a comment on John Chacko's reply
Hi Poonkave,
Many thanks for your assistance.
The method using the image src and xsrc seems the most logical method and works very well indeed.
Great appreciation for your help and advice, which hopefully others will find of benefit within the forum in the future.
Thx Ian
Leave a comment on iandmac's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to iandmac's question
Statistics
- 7 Replies
- 1661 Views
- 0 Followers