Keep html in template, use data attribute for img
Revert previous changes to fix browser preloading a template variable as image. Images use a data attribute within templates as src. Javascript will substitute them.
This commit is contained in:
		
					parent
					
						
							
								a41692120e
							
						
					
				
			
			
				commit
				
					
						94c8d7693f
					
				
			
		
					 8 changed files with 24 additions and 4 deletions
				
			
		|  | @ -247,12 +247,17 @@ ACL.prototype.populate = function(data){ | |||
| 	var height = Math.ceil(data.tot / that.nw) * 42; | ||||
| 	that.list_content.height(height); | ||||
| 	$(data.items).each(function(){ | ||||
| 		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'><img src='{0}'/><p>{1}</p>"+that.item_tpl+"</div>"; | ||||
| 		html = html.format( this.photo, this.name, this.type, this.id, '', this.network, this.link ); | ||||
| 		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'>"+that.item_tpl+"</div>"; | ||||
| 		html = html.format(this.photo, this.name, this.type, this.id, '', this.network, this.link); | ||||
| 		if (this.uids!=undefined) that.group_uids[this.id] = this.uids; | ||||
| 		//console.log(html);
 | ||||
| 		that.list_content.append(html); | ||||
| 	}); | ||||
| 	$(".acl-list-item img[data-src]").each(function(i, el){ | ||||
| 		// Replace data-src attribute with src attribute for every image
 | ||||
| 		$(el).attr('src', $(el).data("src")); | ||||
| 		$(el).removeAttr("data-src"); | ||||
| 	}); | ||||
| 	that.update_view(); | ||||
| } | ||||
| 
 | ||||
|  |  | |||
|  | @ -9,6 +9,7 @@ | |||
| </div> | ||||
| 
 | ||||
| <div class="acl-list-item" rel="acl-template" style="display:none"> | ||||
| 	<img data-src="{0}"><p>{1}</p> | ||||
| 	<a href="#" class='acl-button-show'>$show</a> | ||||
| 	<a href="#" class='acl-button-hide'>$hide</a> | ||||
| </div> | ||||
|  |  | |||
|  | @ -9,6 +9,7 @@ | |||
| </div> | ||||
| 
 | ||||
| <div class="acl-list-item" rel="acl-template" style="display:none"> | ||||
| 	<img data-src="{0}"><p>{1}</p> | ||||
| 	<a href="#" class='acl-button-show'>{{$show}}</a> | ||||
| 	<a href="#" class='acl-button-hide'>{{$hide}}</a> | ||||
| </div> | ||||
|  |  | |||
|  | @ -9,6 +9,7 @@ | |||
| </div> | ||||
| 
 | ||||
| <div class="acl-list-item" rel="acl-template" style="display:none"> | ||||
| 	<img data-src="{0}"><p>{1}</p> | ||||
| 	<a href="#" class='acl-button-show'>$show</a> | ||||
| 	<a href="#" class='acl-button-hide'>$hide</a> | ||||
| </div> | ||||
|  |  | |||
|  | @ -247,12 +247,17 @@ ACL.prototype.populate = function(data){ | |||
| /*	var height = Math.ceil(data.tot / that.nw) * 42; | ||||
| 	that.list_content.height(height);*/ | ||||
| 	$j(data.items).each(function(){ | ||||
| 		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'><img src='{0}'/><p>{1}</p>"+that.item_tpl+"</div>"; | ||||
| 		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'>"+that.item_tpl+"</div>"; | ||||
| 		html = html.format( this.photo, this.name, this.type, this.id, '', this.network, this.link ); | ||||
| 		if (this.uids!=undefined) that.group_uids[this.id] = this.uids; | ||||
| 		//console.log(html);
 | ||||
| 		that.list_content.append(html); | ||||
| 	}); | ||||
| 	$(".acl-list-item img[data-src]").each(function(i, el){ | ||||
| 		// Replace data-src attribute with src attribute for every image
 | ||||
| 		$(el).attr('src', $(el).data("src")); | ||||
| 		$(el).removeAttr("data-src"); | ||||
| 	}); | ||||
| 	that.update_view(); | ||||
| } | ||||
| 
 | ||||
|  |  | |||
|  | @ -9,6 +9,7 @@ | |||
| </div> | ||||
| 
 | ||||
| <div class="acl-list-item" rel="acl-template" style="display:none"> | ||||
| 	<img data-src="{0}"><p>{1}</p> | ||||
| 	<a href="#" class='acl-button-show'>{{$show}}</a> | ||||
| 	<a href="#" class='acl-button-hide'>{{$hide}}</a> | ||||
| </div> | ||||
|  |  | |||
|  | @ -247,12 +247,17 @@ ACL.prototype.populate = function(data){ | |||
| 	var height = Math.ceil(data.tot / that.nw) * 42; | ||||
| 	that.list_content.height(height); | ||||
| 	$j(data.items).each(function(){ | ||||
| 		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'><img src='{0}'/><p>{1}</p>"+that.item_tpl+"</div>"; | ||||
| 		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'>"+that.item_tpl+"</div>"; | ||||
| 		html = html.format( this.photo, this.name, this.type, this.id, '', this.network, this.link ); | ||||
| 		if (this.uids!=undefined) that.group_uids[this.id] = this.uids; | ||||
| 		//console.log(html);
 | ||||
| 		that.list_content.append(html); | ||||
| 	}); | ||||
| 	$(".acl-list-item img[data-src]").each(function(i, el){ | ||||
| 		// Replace data-src attribute with src attribute for every image
 | ||||
| 		$(el).attr('src', $(el).data("src")); | ||||
| 		$(el).removeAttr("data-src"); | ||||
| 	}); | ||||
| 	that.update_view(); | ||||
| } | ||||
| 
 | ||||
|  |  | |||
|  | @ -9,6 +9,7 @@ | |||
| </div> | ||||
| 
 | ||||
| <div class="acl-list-item" rel="acl-template" style="display:none"> | ||||
| 	<img data-src="{0}"><p>{1}</p> | ||||
| 	<a href="#" class='acl-button-show'>{{$show}}</a> | ||||
| 	<a href="#" class='acl-button-hide'>{{$hide}}</a> | ||||
| </div> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue