lazy load gallery

This commit is contained in:
LukePulverenti 2013-03-06 18:28:43 -05:00
parent f80ce3c451
commit 60545c433b
2 changed files with 24 additions and 4 deletions

View file

@ -56,7 +56,7 @@
<h3>Cast & Crew</h3> <h3>Cast & Crew</h3>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p> <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div> </div>
<div data-role="collapsible" data-content-theme="a"> <div data-role="collapsible" data-content-theme="a" id="galleryCollapsible">
<h3>Gallery</h3> <h3>Gallery</h3>
<div id="galleryContent"></div> <div id="galleryContent"></div>
</div> </div>

View file

@ -3,9 +3,18 @@
onPageShow: function () { onPageShow: function () {
ItemDetailPage.reload(); ItemDetailPage.reload();
$('#galleryCollapsible', this).on('expand', ItemDetailPage.onGalleryExpand);
}, },
reload: function() { onPageHide: function () {
$('#galleryCollapsible', this).off('expand', ItemDetailPage.onGalleryExpand);
ItemDetailPage.item = null;
},
reload: function () {
var id = getParameterByName('id'); var id = getParameterByName('id');
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
@ -15,6 +24,8 @@
renderItem: function (item) { renderItem: function (item) {
ItemDetailPage.item = item;
var page = $.mobile.activePage; var page = $.mobile.activePage;
ItemDetailPage.item = item; ItemDetailPage.item = item;
@ -30,7 +41,6 @@
ItemDetailPage.renderImage(item); ItemDetailPage.renderImage(item);
ItemDetailPage.renderOverviewBlock(item); ItemDetailPage.renderOverviewBlock(item);
ItemDetailPage.renderScenes(item); ItemDetailPage.renderScenes(item);
ItemDetailPage.renderGallery(item);
ItemDetailPage.renderMediaInfo(item); ItemDetailPage.renderMediaInfo(item);
$('#itemName', page).html(name); $('#itemName', page).html(name);
@ -265,6 +275,16 @@
MediaPlayer.play([ItemDetailPage.item]); MediaPlayer.play([ItemDetailPage.item]);
}, },
onGalleryExpand: function() {
if (ItemDetailPage.item) {
ItemDetailPage.renderGallery(ItemDetailPage.item);
$(this).off('expand', ItemDetailPage.onGalleryExpand);
}
},
renderGallery: function (item) { renderGallery: function (item) {
var page = $.mobile.activePage; var page = $.mobile.activePage;
@ -353,4 +373,4 @@
} }
}; };
$(document).on('pageshow', "#itemDetailPage", ItemDetailPage.onPageShow); $(document).on('pageshow', "#itemDetailPage", ItemDetailPage.onPageShow).on('pagehide', "#itemDetailPage", ItemDetailPage.onPageHide);