mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 10:20:08 +00:00
fixed loading of images, now happens only when needed and not on every focus...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
d0efae9e66
commit
5822fc44a0
80
ui/data.js
80
ui/data.js
@ -1350,9 +1350,30 @@ function getGIDsAfter(count, gid, ribbon, inclusive, data){
|
||||
// If gid does not exist in the requested ribbon then getGIDBefore() is
|
||||
// used to get an appropriate alternative gid.
|
||||
//
|
||||
// If gid is less than count/2 to ribbon head/tail, then less than count
|
||||
// gids will be returned
|
||||
//
|
||||
// count
|
||||
// |<------>|
|
||||
// oXoooooooooooooooo -> ___oXoooo
|
||||
// ^
|
||||
// gid
|
||||
//
|
||||
//
|
||||
// Setting force_count will make this always return count images, even
|
||||
// at the start and end of the ribbon.
|
||||
//
|
||||
// count
|
||||
// |<------>|
|
||||
// oXoooooooooooooooo -> oXooooooo
|
||||
// ^
|
||||
// gid
|
||||
//
|
||||
// Otherwise this will return less.
|
||||
//
|
||||
// NOTE: skipping gid and ribbon while passing data may not work correctly...
|
||||
// NOTE: count represents section diameter...
|
||||
function getGIDsAround(count, gid, ribbon, data){
|
||||
function getGIDsAround(count, gid, ribbon, data, force_count){
|
||||
if(count == 0){
|
||||
return []
|
||||
}
|
||||
@ -1360,6 +1381,7 @@ function getGIDsAround(count, gid, ribbon, data){
|
||||
data = data == null ? DATA : data
|
||||
gid = gid == null ? getImageGID() : gid
|
||||
ribbon = ribbon == null ? getRibbonIndex() : ribbon
|
||||
// XXX is this out of context here???
|
||||
count = count == null ? Math.round(LOAD_SCREENS * getScreenWidthInImages()) : count
|
||||
|
||||
var ribbon_data = data.ribbons[ribbon]
|
||||
@ -1375,6 +1397,17 @@ function getGIDsAround(count, gid, ribbon, data){
|
||||
var end = i + Math.ceil(count/2)
|
||||
end = end > ribbon_data.length ? ribbon_data.length : end
|
||||
|
||||
// force count by extending the ribbon at the opposite end...
|
||||
if(force_count && ribbon_data.length > count){
|
||||
var d = count - (end - start)
|
||||
|
||||
start = end >= ribbon_data.length ? start - d : start
|
||||
start = start < 0 ? 0 : start
|
||||
|
||||
end = start <= 0 ? end + d : end
|
||||
end = end > ribbon_data.length ? ribbon_data.length : end
|
||||
}
|
||||
|
||||
// get the actual data...
|
||||
return ribbon_data.slice(start, end)
|
||||
}
|
||||
@ -1436,7 +1469,7 @@ function getCommonSubArray(L1, L2){
|
||||
|
||||
// Load count images around a given image/gid into the given ribbon.
|
||||
//
|
||||
function loadImagesAround(count, gid, ribbon, data){
|
||||
function loadImagesAround(count, gid, ribbon, data, force_count){
|
||||
// default values...
|
||||
data = data == null ? DATA : data
|
||||
ribbon = ribbon == null ? getRibbonIndex() : ribbon
|
||||
@ -1451,7 +1484,7 @@ function loadImagesAround(count, gid, ribbon, data){
|
||||
.find('.image')
|
||||
.map(function(_, e){ return getImageGID(e) })
|
||||
.toArray()
|
||||
var new_ribbon = getGIDsAround(count, gid, ribbon, data)
|
||||
var new_ribbon = getGIDsAround(count, gid, ribbon, data, force_count)
|
||||
|
||||
// get the common sub-ribbon...
|
||||
// NOTE: we are only interested in continuous sub-ribbons...
|
||||
@ -1622,27 +1655,34 @@ function loadSettings(){
|
||||
// NOTE: it appears that sorting images by priority before loading them
|
||||
// to cache has little or no effect on the order they are
|
||||
// loaded/rendered...
|
||||
// NOTE: this is not meant to be a real cache, rather a que for the OS and
|
||||
// backend/webkit on what's next...
|
||||
function preCacheRibbonImages(ribbon){
|
||||
var i = getRibbonIndex(ribbon)
|
||||
var size = getVisibleImageSize('max')
|
||||
var screen_size = getScreenWidthInImages(getVisibleImageSize())
|
||||
var cache_frame_size = (screen_size * LOAD_SCREENS) / 2
|
||||
var images = ribbon.find('.image')
|
||||
var first = getImageGID(images.first())
|
||||
var last = getImageGID(images.last())
|
||||
var deferred = $.Deferred()
|
||||
setTimeout(function(){
|
||||
var i = getRibbonIndex(ribbon)
|
||||
var size = getVisibleImageSize('max')
|
||||
var screen_size = getScreenWidthInImages(getVisibleImageSize())
|
||||
// XXX
|
||||
var cache_frame_size = (screen_size * LOAD_SCREENS) / 2
|
||||
var images = ribbon.find('.image')
|
||||
var first = getImageGID(images.first())
|
||||
var last = getImageGID(images.last())
|
||||
|
||||
var gids = getGIDsAfter(-cache_frame_size, first)
|
||||
.concat(getGIDsAfter(cache_frame_size, last))
|
||||
var gids = getGIDsAfter(-cache_frame_size, first)
|
||||
.concat(getGIDsAfter(cache_frame_size, last))
|
||||
|
||||
var cache = []
|
||||
IMAGE_CACHE[i] = cache
|
||||
$.each(gids, function(i, e){
|
||||
var img = new Image()
|
||||
img.src = getBestPreview(e, size).url
|
||||
cache.push(img)
|
||||
})
|
||||
var cache = []
|
||||
IMAGE_CACHE[i] = cache
|
||||
$.each(gids, function(i, e){
|
||||
var img = new Image()
|
||||
img.src = getBestPreview(e, size).url
|
||||
cache.push(img)
|
||||
})
|
||||
|
||||
return cache
|
||||
deferred.resolve(cache)
|
||||
}, 0)
|
||||
return deferred
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -221,13 +221,17 @@ Populated
|
||||
<div class="ribbon">
|
||||
<div class="image"></div>
|
||||
<div class="image"></div>
|
||||
...
|
||||
</div>
|
||||
<div class="ribbon">
|
||||
<div class="image"></div>
|
||||
<div class="current image"></div>
|
||||
<div class="image"></div>
|
||||
<div class="mark selected"></div>
|
||||
<div class="image"></div>
|
||||
...
|
||||
</div>
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
77
ui/setup.js
77
ui/setup.js
@ -85,9 +85,6 @@ function setupDataBindings(viewer){
|
||||
|
||||
// NOTE: we do not need to worry about explicit centering the ribbon
|
||||
// here, just ball-park-load the correct batch...
|
||||
// XXX need to maintain the correct number of images per ribbon
|
||||
// per zoom setting -- things get really odd when a ribbon
|
||||
// is smaller than it should be...
|
||||
// XXX this does not get called on marking...
|
||||
.on('preCenteringRibbon', function(evt, ribbon, image){
|
||||
var r = getRibbonIndex(ribbon)
|
||||
@ -97,14 +94,6 @@ function setupDataBindings(viewer){
|
||||
return
|
||||
}
|
||||
|
||||
var gid = getImageGID(image)
|
||||
var gr = DATA.ribbons[r]
|
||||
var img_before = getImageBefore(image, ribbon)
|
||||
var gid_before = getGIDBefore(gid, r)
|
||||
var screen_size = getScreenWidthInImages()
|
||||
screen_size = screen_size < 1 ? 1 : screen_size
|
||||
var l = ribbon.find('.image').length
|
||||
|
||||
// skip the whole thing if the ribbon is not visible -- outside
|
||||
// of viewer are...
|
||||
var viewer = $('.viewer')
|
||||
@ -116,38 +105,45 @@ function setupDataBindings(viewer){
|
||||
return
|
||||
}
|
||||
|
||||
// load images if we do a long jump -- start, end or some mark
|
||||
// outside of currently loaded section...
|
||||
if(gid_before == null
|
||||
|| gid_before != getImageGID(img_before)
|
||||
// also load if we run out of images in the current ribbon,
|
||||
// likely due to shifting...
|
||||
|| ( gr.length > l
|
||||
&& l < Math.round(screen_size * LOAD_SCREENS))){
|
||||
loadImagesAround(Math.round(screen_size * LOAD_SCREENS), gid, ribbon)
|
||||
// prepare for loading...
|
||||
var gid = getImageGID(image)
|
||||
var gr = DATA.ribbons[r]
|
||||
var img_before = getImageBefore(image, ribbon)
|
||||
var gid_before = getGIDBefore(gid, r)
|
||||
var screen_size = getScreenWidthInImages()
|
||||
screen_size = screen_size < 1 ? 1 : screen_size
|
||||
var load_frame_size = Math.round(screen_size * LOAD_SCREENS)
|
||||
var roll_frame_size = Math.ceil(load_frame_size / 3)
|
||||
var threshold = Math.floor(load_frame_size / 4)
|
||||
threshold = threshold < 1 ? 1 : threshold
|
||||
var index = gr.indexOf(gid)
|
||||
var at_start = index < threshold
|
||||
var at_end = (gr.length-1 - index) < threshold
|
||||
|
||||
// roll the ribbon while we are advancing...
|
||||
} else {
|
||||
var head = img_before.prevAll('.image')
|
||||
var tail = img_before.nextAll('.image')
|
||||
// current image is loaded...
|
||||
if(gid_before == getImageGID(img_before)){
|
||||
var head = img_before.prevAll('.image').length
|
||||
var tail = img_before.nextAll('.image').length
|
||||
var l = ribbon.find('.image').length
|
||||
|
||||
// NOTE: if this is greater than the number of images currently
|
||||
// loaded, it might lead to odd effects...
|
||||
var frame_size = Math.ceil((screen_size * LOAD_SCREENS) / 2)
|
||||
var threshold = Math.floor(frame_size / 2)
|
||||
threshold = threshold < 1 ? 1 : threshold
|
||||
// less images than expected - extend ribbon...
|
||||
if(l < load_frame_size){
|
||||
// NOTE: we are forcing the count of images...
|
||||
loadImagesAround(load_frame_size, gid, ribbon, null, true)
|
||||
|
||||
// do the loading...
|
||||
// XXX need to expand/contract the ribbon depending on speed...
|
||||
// ...might also be a good idea to load smaller images
|
||||
// while scrolling really fast...
|
||||
// XXX use extendRibbon, to both roll and expand/contract...
|
||||
if(tail.length < threshold){
|
||||
var rolled = rollImages(frame_size, ribbon)
|
||||
}
|
||||
if(head.length < threshold){
|
||||
var rolled = rollImages(-frame_size, ribbon)
|
||||
// tail at threshold - roll ->
|
||||
} else if(!at_end && tail < threshold){
|
||||
var rolled = rollImages(roll_frame_size, ribbon)
|
||||
|
||||
// head at threshold - roll <-
|
||||
} else if(!at_start && head < threshold){
|
||||
var rolled = rollImages(-roll_frame_size, ribbon)
|
||||
}
|
||||
|
||||
// we jumped, load new set...
|
||||
} else {
|
||||
// NOTE: we are forcing the count of images...
|
||||
loadImagesAround(load_frame_size, gid, ribbon, null, true)
|
||||
}
|
||||
})
|
||||
|
||||
@ -194,6 +190,7 @@ function setupDataBindings(viewer){
|
||||
})
|
||||
|
||||
.on('fittingImages', function(evt, n){
|
||||
console.log('!!!! fittingImages')
|
||||
// load correct amount of images in each ribbon!!!
|
||||
var screen_size = getScreenWidthInImages()
|
||||
var gid = getImageGID()
|
||||
@ -217,7 +214,7 @@ function setupDataBindings(viewer){
|
||||
return
|
||||
}
|
||||
*/
|
||||
loadImagesAround(Math.round(screen_size * LOAD_SCREENS), gid, r)
|
||||
loadImagesAround(Math.round(screen_size * LOAD_SCREENS), gid, r, null, true)
|
||||
})
|
||||
|
||||
centerView(null, 'css')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user