mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-12-27 13:32:01 +00:00
ribbon loading optimization -- mostly skipping event touching ribbons that we do not see...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
8ba0c8f0ac
commit
bd5f9476df
44
ui/data.js
44
ui/data.js
@ -144,6 +144,10 @@ var UPDATE_SORT_ENABLED = false
|
||||
// XXX for some reason the sync version appears to work faster...
|
||||
var UPDATE_SYNC = false
|
||||
|
||||
// if this is true image previews will be loaded synchronously by
|
||||
// default...
|
||||
var SYNC_IMG_LOADER = false
|
||||
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
@ -1097,8 +1101,23 @@ function convertDataGen1(data, cmp){
|
||||
* Loaders
|
||||
*/
|
||||
|
||||
function updateImageIndicators(gid, image){
|
||||
gid = gid == null ? getImageGID() : gid
|
||||
image = image == null ? getImage() : $(image)
|
||||
|
||||
// marks...
|
||||
if(MARKED.indexOf(gid) != -1){
|
||||
image.addClass('marked')
|
||||
} else {
|
||||
image.removeClass('marked')
|
||||
}
|
||||
|
||||
return image
|
||||
}
|
||||
|
||||
|
||||
// helper...
|
||||
function _loadImageURL(image, url){
|
||||
function _loadImagePreviewURL(image, url){
|
||||
// pre-cache and load image...
|
||||
// NOTE: this will make images load without a blackout...
|
||||
var img = new Image()
|
||||
@ -1112,9 +1131,6 @@ function _loadImageURL(image, url){
|
||||
}
|
||||
|
||||
|
||||
var SYNC_IMG_LOADER = true
|
||||
|
||||
|
||||
// Update an image element
|
||||
//
|
||||
// NOTE: care must be taken to reset ALL attributes an image can have,
|
||||
@ -1158,21 +1174,21 @@ function updateImage(image, gid, size, sync){
|
||||
var p_url = getBestPreview(gid, size).url
|
||||
// sync load...
|
||||
if(sync){
|
||||
_loadImageURL(image, p_url)
|
||||
_loadImagePreviewURL(image, p_url)
|
||||
|
||||
// async load...
|
||||
} else {
|
||||
// NOTE: storing the url in .data() makes the image load the
|
||||
// last preview and in a case when we
|
||||
// manage to call updateImage(...) on the same element
|
||||
// multiple times before the previews get loaded...
|
||||
// last requested preview and in a case when we manage to
|
||||
// call updateImage(...) on the same element multiple times
|
||||
// before the previews get loaded...
|
||||
// ...setting the data().loading is sync while loading an
|
||||
// image is not and if several loads are done in sequence
|
||||
// image is not, and if several loads are done in sequence
|
||||
// there is no guarantee that they will happen in the same
|
||||
// order as requested...
|
||||
image.data().loading = p_url
|
||||
setTimeout(function(){
|
||||
_loadImageURL(image, image.data().loading)
|
||||
_loadImagePreviewURL(image, image.data().loading)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
@ -1192,12 +1208,8 @@ function updateImage(image, gid, size, sync){
|
||||
// NOTE: this only has effect on non-square image blocks...
|
||||
correctImageProportionsForRotation(image)
|
||||
|
||||
// marks...
|
||||
if(MARKED.indexOf(gid) != -1){
|
||||
image.addClass('marked')
|
||||
} else {
|
||||
image.removeClass('marked')
|
||||
}
|
||||
// marks and other indicators...
|
||||
updateImageIndicators(gid, image)
|
||||
|
||||
return image
|
||||
}
|
||||
|
||||
@ -138,8 +138,69 @@
|
||||
}
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
.mark {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin-left: -300px;
|
||||
left: 0px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.current + .mark {
|
||||
border: solid red 5px;
|
||||
}
|
||||
|
||||
.mark.blue,
|
||||
.mark.red,
|
||||
.mark.yellow {
|
||||
width: 25px;
|
||||
margin-left: -25px;
|
||||
border: none;
|
||||
}
|
||||
.mark.blue:after,
|
||||
.mark.red:after,
|
||||
.mark.yellow:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
font-size: 0pt;
|
||||
border: none;
|
||||
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
left: auto;
|
||||
right: 10px;
|
||||
|
||||
border-radius: 50%;
|
||||
}
|
||||
.mark.blue:after {
|
||||
background: blue;
|
||||
}
|
||||
.mark.red {
|
||||
left: -17px;
|
||||
width: 25px;
|
||||
}
|
||||
.mark.red:after {
|
||||
background: red;
|
||||
}
|
||||
.mark.yellow {
|
||||
left: -34px;
|
||||
width: 25px;
|
||||
}
|
||||
.mark.yellow:after {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="jquery.js"></script>
|
||||
|
||||
<body>
|
||||
The current structure...
|
||||
@ -171,5 +232,20 @@
|
||||
<!-- XXX this shows that we will still need margin-patching and resizing when rotating...
|
||||
<div class="image3" style="width: 400px;"><div style="background-image: url(image.jpg)"></div></div><br>
|
||||
<div class="image3" style="width: 400px;"><div style="background-image: url(image.jpg); -webkit-transform: rotate(90deg)"></div></div-->
|
||||
|
||||
<hr>
|
||||
|
||||
Keep the images on one level and marks outside, after the image...<br>
|
||||
<div class="ribbon">
|
||||
<div id="0" class="image2" style="background-image: url(image.jpg)"></div>
|
||||
<div class="mark red"></div>
|
||||
|
||||
<div id="1" class="current image2" style="background-image: url(image.jpg)"></div>
|
||||
<div class="mark"></div>
|
||||
<div class="mark blue"></div>
|
||||
<div class="mark red"></div>
|
||||
<div class="mark yellow"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
42
ui/setup.js
42
ui/setup.js
@ -83,16 +83,21 @@ function setupDataBindings(viewer){
|
||||
updateCurrentMarker()
|
||||
})
|
||||
|
||||
// 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){
|
||||
// NOTE: we do not need to worry about centering the ribbon
|
||||
// here, just ball-park-load the correct batch...
|
||||
var r = getRibbonIndex(ribbon)
|
||||
|
||||
// skip all but the curent ribbon in single image view...
|
||||
if(toggleSingleImageMode('?') == 'on' && r != getRibbonIndex()){
|
||||
return
|
||||
}
|
||||
|
||||
var gid = getImageGID(image)
|
||||
var r = getRibbonIndex(ribbon)
|
||||
var gr = DATA.ribbons[r]
|
||||
var img_before = getImageBefore(image, ribbon)
|
||||
var gid_before = getGIDBefore(gid, r)
|
||||
@ -100,6 +105,18 @@ function setupDataBindings(viewer){
|
||||
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')
|
||||
var H = viewer.height()
|
||||
var h = getImage().height()
|
||||
var t = getRelativeVisualPosition(viewer, ribbon).top
|
||||
// XXX also check for visibility...
|
||||
if( t+h <= 0 || t >= H ){
|
||||
//console.log('#### skipping align of ribbon:', r)
|
||||
return
|
||||
}
|
||||
|
||||
// load images if we do a long jump -- start, end or some mark
|
||||
// outside of currently loaded section...
|
||||
if(gid_before == null
|
||||
@ -181,10 +198,29 @@ function setupDataBindings(viewer){
|
||||
// load correct amount of images in each ribbon!!!
|
||||
var screen_size = getScreenWidthInImages()
|
||||
var gid = getImageGID()
|
||||
|
||||
/* XXX used to skip ribbons that are not visible... (see bellow)
|
||||
var viewer = $('.viewer')
|
||||
var H = viewer.height()
|
||||
var h = getImage().height()
|
||||
*/
|
||||
|
||||
// update and align ribbons...
|
||||
$('.ribbon').each(function(){
|
||||
var r = $(this)
|
||||
/* XXX skip ribbons that are not visible...
|
||||
* causes misaligns and misloads on zoom-in...
|
||||
// NOTE: we factor in the scale difference to predict
|
||||
// ribbon position in the new view...
|
||||
var t = getRelativeVisualPosition(viewer, r).top * (n/screen_size)
|
||||
if( t+h <= 0 || t >= H ){
|
||||
console.log('#### skipping align of ribbon:', getRibbonIndex(r))
|
||||
return
|
||||
}
|
||||
*/
|
||||
loadImagesAround(Math.round(screen_size * LOAD_SCREENS), gid, r)
|
||||
})
|
||||
|
||||
centerView(null, 'css')
|
||||
|
||||
// update settings...
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user