mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 11:20:09 +00:00
added image pre-caching + minor revactoring...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
4177be6bed
commit
8ffb7f49ea
@ -128,8 +128,9 @@ function getVisibleImageSize(){
|
||||
|
||||
|
||||
// Return the number of images that can fit to viewer width...
|
||||
function getScreenWidthInImages(){
|
||||
return $('.viewer').innerWidth() / getVisibleImageSize()
|
||||
function getScreenWidthInImages(size){
|
||||
size = size == null ? getVisibleImageSize() : size
|
||||
return $('.viewer').innerWidth() / size
|
||||
}
|
||||
|
||||
|
||||
@ -743,6 +744,8 @@ function lastImage(mode){
|
||||
|
||||
// NOTE: if moving is 'next' these will chose the image after the current's order.
|
||||
// NOTE: if an image with the same order is found, moving argument has no effect.
|
||||
// XXX make these select the closest image instead of the one based on
|
||||
// direction...
|
||||
// XXX these sometimes behave wrong at the start of the ribbon depending
|
||||
// on direction...
|
||||
function prevRibbon(moving, mode){
|
||||
|
||||
117
ui/data.js
117
ui/data.js
@ -43,6 +43,8 @@ var DATA = {
|
||||
|
||||
var MARKS = []
|
||||
|
||||
var IMAGE_CACHE = []
|
||||
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
@ -213,6 +215,32 @@ function getImageGIDs(from, count, ribbon, inclusive){
|
||||
}
|
||||
|
||||
|
||||
// Select best preview by size...
|
||||
//
|
||||
// NOTE: this will use the original if everything else is smaller...
|
||||
function getBestPreview(gid, size){
|
||||
size = size == null ? getVisibleImageSize() : size
|
||||
var s
|
||||
var img_data = DATA.images[gid]
|
||||
var url = img_data.path
|
||||
var preview_size = 'Original'
|
||||
var p = Infinity
|
||||
|
||||
for(var k in img_data.preview){
|
||||
s = parseInt(k)
|
||||
if(s < p && s > size){
|
||||
preview_size = k
|
||||
p = s
|
||||
url = img_data.preview[k]
|
||||
}
|
||||
}
|
||||
return {
|
||||
url: url,
|
||||
size: preview_size
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
* Loaders
|
||||
@ -244,25 +272,13 @@ function updateImage(image, gid, size){
|
||||
img_data = STUB_IMAGE_DATA
|
||||
}
|
||||
|
||||
// select best preview by size...
|
||||
// NOTE: this will use the original if everything else is smaller...
|
||||
var s
|
||||
var url = 'url('+DATA.images[gid].path+')'
|
||||
var preview_size = 'Original'
|
||||
var p = Infinity
|
||||
for(var k in img_data.preview){
|
||||
s = parseInt(k)
|
||||
if(s < p && s > size){
|
||||
preview_size = k
|
||||
p = s
|
||||
url = 'url('+ img_data.preview[k] +')'
|
||||
}
|
||||
}
|
||||
// get the url...
|
||||
var preview = getBestPreview(gid, size)
|
||||
image.css({
|
||||
'background-image': url,
|
||||
'background-image': 'url('+ preview.url +')',
|
||||
})
|
||||
|
||||
window.DEBUG && image.html(DATA.order.indexOf(gid) +'<br>'+ gid +'<br>'+ preview_size)
|
||||
window.DEBUG && image.html(DATA.order.indexOf(gid) +'<br>'+ gid +'<br>'+ preview.size)
|
||||
|
||||
return image
|
||||
}
|
||||
@ -332,12 +348,18 @@ function loadImages(ref_gid, count, ribbon){
|
||||
window.DEBUG && console.log('>>> (ribbon:', ribbon_i, ') FULL RELOAD --', gids.length)
|
||||
// XXX do we need to think about alining here???
|
||||
extendRibbon(0, gids.length - old_gids.length, ribbon)
|
||||
return ribbon
|
||||
|
||||
var images = ribbon
|
||||
.find('.image')
|
||||
.each(function(i, e){
|
||||
updateImage(e, gids[i], size)
|
||||
})
|
||||
|
||||
$('.viewer').trigger('reloadedRibbon', [ribbon])
|
||||
|
||||
return images
|
||||
|
||||
|
||||
// do nothing...
|
||||
// ...the requested section is the same as the one already loaded...
|
||||
} else {
|
||||
@ -362,6 +384,8 @@ function loadImages(ref_gid, count, ribbon){
|
||||
updateImage(e, gids[i + gids.length - tail], size)
|
||||
})
|
||||
|
||||
$('.viewer').trigger('updatedRibbon', [ribbon])
|
||||
|
||||
return ribbon.find('.image')
|
||||
}
|
||||
}
|
||||
@ -409,11 +433,14 @@ function rollImages(n, ribbon, extend, no_compensate_shift){
|
||||
updateImage($(e), gids[i], size)
|
||||
})
|
||||
|
||||
$('.viewer').trigger('updatedRibbon', [ribbon])
|
||||
|
||||
return images
|
||||
}
|
||||
|
||||
|
||||
function loadData(data, images_per_screen){
|
||||
DATA = data
|
||||
var ribbons_set = $('.ribbon-set')
|
||||
var current = data.current
|
||||
// if no width is given, use the current or default...
|
||||
@ -490,8 +517,7 @@ function convertDataGen1(data){
|
||||
|
||||
function loadLocalStorage(attr){
|
||||
attr = attr == null ? 'DATA' : attr
|
||||
DATA = JSON.parse(localStorage[attr])
|
||||
return loadData(DATA)
|
||||
return loadData(JSON.parse(localStorage[attr]))
|
||||
}
|
||||
|
||||
function saveLocalStorage(attr){
|
||||
@ -502,6 +528,44 @@ function saveLocalStorage(attr){
|
||||
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
* Image caching...
|
||||
*/
|
||||
|
||||
// NOTE: this will always overwrite the previous cache set for a ribbon...
|
||||
function preCacheRibbonImages(ribbon){
|
||||
var i = getRibbonIndex(ribbon)
|
||||
var size = getVisibleImageSize()
|
||||
var screen_size = getScreenWidthInImages(size)
|
||||
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 = getImageGIDs(first, -cache_frame_size)
|
||||
.concat(getImageGIDs(last, cache_frame_size))
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
function preCacheAllRibbons(){
|
||||
$('.ribbon').each(function(){
|
||||
preCacheRibbonImages($(this))
|
||||
})
|
||||
return IMAGE_CACHE
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
* Setup
|
||||
*/
|
||||
@ -547,7 +611,6 @@ function setupDataBindings(viewer){
|
||||
|| ( gr.length > l
|
||||
&& l < screen_size * LOAD_SCREENS)){
|
||||
loadImages(gid, Math.round(screen_size * LOAD_SCREENS), ribbon)
|
||||
// XXX compensate for the changing number of images...
|
||||
}
|
||||
|
||||
// roll the ribbon while we are advancing...
|
||||
@ -616,10 +679,7 @@ function setupDataBindings(viewer){
|
||||
|
||||
|
||||
.on('fittingImages', function(evt, n){
|
||||
/*
|
||||
// load correct amount of images in each ribbon!!!
|
||||
// XXX this changes focus...
|
||||
// XXX n == 1 breaks this -- going past first image...
|
||||
var screen_size = getScreenWidthInImages()
|
||||
var gid = getImageGID()
|
||||
$('.ribbon').each(function(){
|
||||
@ -627,7 +687,7 @@ function setupDataBindings(viewer){
|
||||
loadImages(gid, Math.round(screen_size * LOAD_SCREENS), r)
|
||||
})
|
||||
centerView(null, 'css')
|
||||
*/
|
||||
|
||||
// update previews...
|
||||
// XXX make this update only what needs updating...
|
||||
updateImages()
|
||||
@ -686,6 +746,15 @@ function setupDataBindings(viewer){
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
// caching...
|
||||
.on('reloadedRibbon updatedRibbon', function(evt, ribbon){
|
||||
|
||||
window.DEBUG && console.log('>>> (ribbon:', getRibbonIndex(ribbon), ') Updating cache...')
|
||||
|
||||
preCacheRibbonImages(ribbon)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -267,8 +267,7 @@ $(function(){
|
||||
if('DATA' in localStorage){
|
||||
loadLocalStorage()
|
||||
} else {
|
||||
DATA = convertDataGen1(image_list)
|
||||
loadData(DATA)
|
||||
loadData(convertDataGen1(image_list))
|
||||
}
|
||||
|
||||
// NOTE: this is global so as to not to add any extra complexity to
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user