flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2026-01-04 01:11:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

ribbon loading optimization -- mostly skipping event touching ribbons that we do not see...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-12-02 17:45:54 +04:00
parent 8ba0c8f0ac
commit bd5f9476df
3 changed files with 143 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
ui/data.js
View File

@ -144,6 +144,10 @@ var UPDATE_SORT_ENABLED = false
// XXX for some reason the sync version appears to work faster... // XXX for some reason the sync version appears to work faster...
var UPDATE_SYNC = false 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 * 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... // helper...
function _loadImageURL(image, url){ function _loadImagePreviewURL(image, url){
// pre-cache and load image... // pre-cache and load image...
// NOTE: this will make images load without a blackout... // NOTE: this will make images load without a blackout...
var img = new Image() var img = new Image()
@ -1112,9 +1131,6 @@ function _loadImageURL(image, url){
} }
var SYNC_IMG_LOADER = true
// Update an image element // Update an image element
// //
// NOTE: care must be taken to reset ALL attributes an image can have, // 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 var p_url = getBestPreview(gid, size).url
// sync load... // sync load...
if(sync){ if(sync){
_loadImageURL(image, p_url) _loadImagePreviewURL(image, p_url)
// async load... // async load...
} else { } else {
// NOTE: storing the url in .data() makes the image load the // NOTE: storing the url in .data() makes the image load the
// last preview and in a case when we // last requested preview and in a case when we manage to
// manage to call updateImage(...) on the same element // call updateImage(...) on the same element multiple times
// multiple times before the previews get loaded... // before the previews get loaded...
// ...setting the data().loading is sync while loading an // ...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 // there is no guarantee that they will happen in the same
// order as requested... // order as requested...
image.data().loading = p_url image.data().loading = p_url
setTimeout(function(){ setTimeout(function(){
_loadImageURL(image, image.data().loading) _loadImagePreviewURL(image, image.data().loading)
}, 0) }, 0)
} }
@ -1192,12 +1208,8 @@ function updateImage(image, gid, size, sync){
// NOTE: this only has effect on non-square image blocks... // NOTE: this only has effect on non-square image blocks...
correctImageProportionsForRotation(image) correctImageProportionsForRotation(image)
// marks... // marks and other indicators...
if(MARKED.indexOf(gid) != -1){ updateImageIndicators(gid, image)
image.addClass('marked')
} else {
image.removeClass('marked')
}
return image return image
} }

76
ui/experiments/seporate-image-and-background.html
View File

@ -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> </style>
<script src="jquery.js"></script>
<body> <body>
The current structure... The current structure...
@ -171,5 +232,20 @@
<!-- XXX this shows that we will still need margin-patching and resizing when rotating... <!-- 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)"></div></div><br>
<div class="image3" style="width: 400px;"><div style="background-image: url(image.jpg); -webkit-transform: rotate(90deg)"></div></div--> <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> </body>
</html> </html>

42
ui/setup.js
View File

@ -83,16 +83,21 @@ function setupDataBindings(viewer){
updateCurrentMarker() 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 // XXX need to maintain the correct number of images per ribbon
// per zoom setting -- things get really odd when a ribbon // per zoom setting -- things get really odd when a ribbon
// is smaller than it should be... // is smaller than it should be...
// XXX this does not get called on marking... // XXX this does not get called on marking...
.on('preCenteringRibbon', function(evt, ribbon, image){ .on('preCenteringRibbon', function(evt, ribbon, image){
// NOTE: we do not need to worry about centering the ribbon var r = getRibbonIndex(ribbon)
// here, just ball-park-load the correct batch...
// skip all but the curent ribbon in single image view...
if(toggleSingleImageMode('?') == 'on' && r != getRibbonIndex()){
return
}
var gid = getImageGID(image) var gid = getImageGID(image)
var r = getRibbonIndex(ribbon)
var gr = DATA.ribbons[r] var gr = DATA.ribbons[r]
var img_before = getImageBefore(image, ribbon) var img_before = getImageBefore(image, ribbon)
var gid_before = getGIDBefore(gid, r) var gid_before = getGIDBefore(gid, r)
@ -100,6 +105,18 @@ function setupDataBindings(viewer){
screen_size = screen_size < 1 ? 1 : screen_size screen_size = screen_size < 1 ? 1 : screen_size
var l = ribbon.find('.image').length 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 // load images if we do a long jump -- start, end or some mark
// outside of currently loaded section... // outside of currently loaded section...
if(gid_before == null if(gid_before == null
@ -181,10 +198,29 @@ function setupDataBindings(viewer){
// load correct amount of images in each ribbon!!! // load correct amount of images in each ribbon!!!
var screen_size = getScreenWidthInImages() var screen_size = getScreenWidthInImages()
var gid = getImageGID() 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(){ $('.ribbon').each(function(){
var r = $(this) 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) loadImagesAround(Math.round(screen_size * LOAD_SCREENS), gid, r)
}) })
centerView(null, 'css') centerView(null, 'css')
// update settings... // update settings...