Skip to content

Commit

Permalink
Add timer to loadPage to prevent unnecessary reqs
Browse files Browse the repository at this point in the history 
Closes #38
  • Loading branch information
@dellsystem
dellsystem committed Jan 23, 2012
1 parent f3168ab commit 5803185
Showing 1 changed file with 68 additions and 60 deletions.
128 changes: 68 additions & 60 deletions js/diva.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,72 +181,80 @@ THE SOFTWARE.

// Appends the page directly into the document body, or loads the relevant tiles
var loadPage = function(pageIndex) {
var content = [];
var filename = settings.pages[pageIndex].fn;
var rows = settings.pages[pageIndex].r;
var cols = settings.pages[pageIndex].c;
var width = settings.pages[pageIndex].w;
var height = settings.pages[pageIndex].h;
var maxZoom = settings.pages[pageIndex].m_z;
var leftOffset, widthToUse;

// Use an array as a string builder - faster than str concatentation
var lastHeight, lastWidth, row, col, tileHeight, tileWidth, imgSrc;
var tileNumber = 0;
var heightFromTop = settings.heightAbovePages[pageIndex] + settings.verticalPadding;

// Only try to append the div part if the page has not already been loaded
if (!isPageLoaded(pageIndex)) {
// Magically centered using left: 50% and margin-left: -(width/2)
content.push('<div id="' + settings.ID + 'page-' + pageIndex + '" style="top: ' + heightFromTop + 'px; width: ' + width + 'px; height: ' + height + 'px; left: 50%; margin-left: -' + (width / 2) + 'px" class="diva-page">');
}

// Calculate the width and height of the outer tiles (the ones that may have weird dimensions)
lastHeight = height - (rows - 1) * settings.tileHeight;
lastWidth = width - (cols - 1) * settings.tileWidth;
var tilesToLoad = [];

// Now loop through the rows and columns
for (row = 0; row < rows; row++) {
for (col = 0; col < cols; col++) {
var top = row * settings.tileHeight;
var left = col * settings.tileWidth;

// Set to none if there is a tileFadeSpeed set
var displayStyle = (settings.tileFadeSpeed) ? 'none' : 'inline';

// The zoom level might be different, if a page has a different max zoom level than the others
var zoomLevel = (maxZoom === settings.maxZoomLevel) ? settings.zoomLevel : settings.zoomLevel + (maxZoom - settings.maxZoomLevel);
tileHeight = (row === rows - 1) ? lastHeight : settings.tileHeight; // If it's the LAST tile, calculate separately
tileWidth = (col === cols - 1) ? lastWidth : settings.tileWidth; // Otherwise, just set it to the default height/width
imgSrc = settings.iipServerBaseUrl + filename + '&amp;JTL=' + zoomLevel + ',' + tileNumber;

if (!isTileLoaded(pageIndex, tileNumber) && isTileVisible(pageIndex, row, col)) {
content.push('<div id="' + settings.ID + 'tile-' + pageIndex + '-' + tileNumber + '"style="display: ' + displayStyle + '; position: absolute; top: ' + top + 'px; left: ' + left + 'px; background-image: url(\'' + imgSrc + '\'); height: ' + tileHeight + 'px; width: ' + tileWidth + 'px;"></div>');
}
setTimeout(function() {
// If the page is no longer in the viewport after 80 ms, don't load it
if (!isPageVisible(pageIndex)) {
return;
}

tilesToLoad.push(tileNumber);
tileNumber++;
// Otherwise, load after some time (save the timer)
var content = [];
var filename = settings.pages[pageIndex].fn;
var rows = settings.pages[pageIndex].r;
var cols = settings.pages[pageIndex].c;
var width = settings.pages[pageIndex].w;
var height = settings.pages[pageIndex].h;
var maxZoom = settings.pages[pageIndex].m_z;
var leftOffset, widthToUse;

// Use an array as a string builder - faster than str concatentation
var lastHeight, lastWidth, row, col, tileHeight, tileWidth, imgSrc;
var tileNumber = 0;
var heightFromTop = settings.heightAbovePages[pageIndex] + settings.verticalPadding;

// Only try to append the div part if the page has not already been loaded
if (!isPageLoaded(pageIndex)) {
// Magically centered using left: 50% and margin-left: -(width/2)
content.push('<div id="' + settings.ID + 'page-' + pageIndex + '" style="top: ' + heightFromTop + 'px; width: ' + width + 'px; height: ' + height + 'px; left: 50%; margin-left: -' + (width / 2) + 'px" class="diva-page">');
}
}

if (!isPageLoaded(pageIndex)) {
content.push('</div>');
// Calculate the width and height of the outer tiles (the ones that may have weird dimensions)
lastHeight = height - (rows - 1) * settings.tileHeight;
lastWidth = width - (cols - 1) * settings.tileWidth;
var tilesToLoad = [];

// Build the content string and append it to the document
var contentString = content.join('');
$(settings.innerSelector).append(contentString);
} else {
// Append it to the page
$(settings.selector + 'page-' + pageIndex).append(content.join(''));
}
// Now loop through the rows and columns
for (row = 0; row < rows; row++) {
for (col = 0; col < cols; col++) {
var top = row * settings.tileHeight;
var left = col * settings.tileWidth;

// Set to none if there is a tileFadeSpeed set
var displayStyle = (settings.tileFadeSpeed) ? 'none' : 'inline';

// The zoom level might be different, if a page has a different max zoom level than the others
var zoomLevel = (maxZoom === settings.maxZoomLevel) ? settings.zoomLevel : settings.zoomLevel + (maxZoom - settings.maxZoomLevel);
tileHeight = (row === rows - 1) ? lastHeight : settings.tileHeight; // If it's the LAST tile, calculate separately
tileWidth = (col === cols - 1) ? lastWidth : settings.tileWidth; // Otherwise, just set it to the default height/width
imgSrc = settings.iipServerBaseUrl + filename + '&amp;JTL=' + zoomLevel + ',' + tileNumber;

// Make the tiles we just appended fade in
if (settings.tileFadeSpeed) {
for (var i = 0; i < tilesToLoad.length; i++) {
$(settings.selector + 'tile-' + pageIndex + '-' + tilesToLoad[i]).fadeIn(settings.tileFadeSpeed);
if (!isTileLoaded(pageIndex, tileNumber) && isTileVisible(pageIndex, row, col)) {
content.push('<div id="' + settings.ID + 'tile-' + pageIndex + '-' + tileNumber + '"style="display: ' + displayStyle + '; position: absolute; top: ' + top + 'px; left: ' + left + 'px; background-image: url(\'' + imgSrc + '\'); height: ' + tileHeight + 'px; width: ' + tileWidth + 'px;"></div>');
}

tilesToLoad.push(tileNumber);
tileNumber++;
}
}
}

if (!isPageLoaded(pageIndex)) {
content.push('</div>');

// Build the content string and append it to the document
var contentString = content.join('');
$(settings.innerSelector).append(contentString);
} else {
// Append it to the page
$(settings.selector + 'page-' + pageIndex).append(content.join(''));
}

// Make the tiles we just appended fade in
if (settings.tileFadeSpeed) {
for (var i = 0; i < tilesToLoad.length; i++) {
$(settings.selector + 'tile-' + pageIndex + '-' + tilesToLoad[i]).fadeIn(settings.tileFadeSpeed);
}
}
}, 80); // Number of milliseconds determined through trial and error
};

// Delete a page from the DOM; will occur when a page is scrolled out of the viewport
Expand Down

2 comments on commit 5803185

@ahankinson
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool! Is this live on the diva demo site?

@dellsystem
Copy link
Member Author

@dellsystem dellsystem commented on 5803185 Jan 24, 2012 via email

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.