ImageGrid/ui/experiments/dynamic-loading.html

<script src="jquery.js"></script>

<style>

.field {
	width: auto;
	overflow: visible;
}

.ribbon {
	padding: 10px;
	height: 100px;

	width: auto;
	overflow: visible;
	white-space: nowrap;
	font-size: 0px;
}

.image {
	display: inline-block;
	height: 80px;
	width: 80px;
	background: silver;
}

.current.image {
	background: gray;
}

.unloaded.image {
	opacity: 0.5;
}

/* CSS visibility to make the load on the browser less */

.image:nth-child(3) ~ .image {
	background: red;
}

</style>


<div class="field">
</div>

<script>

var json = {
	position: 10, 
	ribbons:[
		{
			3: {},
			4: {},
			6: {},
			7: {},
			8: {},
			10: {},
			12: {},
			13: {},
			18: {},
			19: {},
			20: {},
			30: {},
			34: {},
			37: {},
			40: {},
		},
		{
			103: {},
			104: {},
			106: {},
			107: {},
			108: {},
			1010: {},
			1012: {},
			1013: {},
			1018: {},
			1019: {},
			1020: {},
			1030: {},
			1034: {},
			1037: {},
			1040: {},
		},
		{
			203: {},
			204: {},
			206: {},
			207: {},
			208: {},
			2010: {},
			2012: {},
			2013: {},
			2018: {},
			2019: {},
			2020: {},
			2030: {},
			2034: {},
			2037: {},
			2040: {},
		}
	]
}


var LOAD = 5

function enumerate(obj, predicate){
	if(predicate == null){
		predicate = function(o, a){return true}
	}
	var res = []
	for(var k in obj){
		predicate(obj, k) && res.push(k)
	}
	return res
}
	

// build an image element...
function makeImage(id){
	return $('<div class="image"/>')
			.attr({id: id})
			.mousedown(selectImage)
			.addClass('unloaded')
}

function loadJSON(json){
	var field = $('.field')
	var cur_id = json.position+''
	var ribbons = json.ribbons
	var r = Math.floor(LOAD/2)

	var view_ribbons = $('.ribbon')

	for(var i=0; i<ribbons.length; i++){
		var images = ribbons[i]
		var index = enumerate(images)
		var ribbon = $('<div class="ribbon"/>').appendTo(field)
		for(var j in images){
			makeImage(j).appendTo(ribbon)
		}
	}
	$('#'+cur_id).mousedown()
}

function updateRibbonImages(img, r){
	var images = img.parents('.ribbon').children('.image')

	var cur_i = images.index(img)

	// load...
	var loading = $([])
	for(var i=Math.max(0, cur_i-r); i<=Math.min(images.length, cur_i+r); i++){
		loading.push(images[i])
		images[i] = {}
	}
	// do the loading...
	loading.filter('.unloaded')
		.addClass('loaded')
		.removeClass('unloaded')

	// unload...
	images.filter('.loaded').removeClass('loaded').addClass('unloaded')
}

function selectImage(){
	// update view...
	$('.current.image').removeClass('current')
	$(this).addClass('current')
	// update json...
	json.position = $(this).attr('id')
	// update visible images...
	//loadJSON(json)
	updateRibbonImages($('.current.image'), Math.floor(LOAD/2))
}

loadJSON(json)

</script>