DIR : /home/kozerus/public_html/pn/uize/site-source/examples/~EXPERIMENTAL-wise-load.html
/home/kozerus/public_html/pn/uize/site-source/examples
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lazy Loading of Images | JavaScript Examples | UIZE JavaScript Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="Uize.Dom.Basics Uize.Dom.Pos"/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="../css/page.css"/>
<link rel="stylesheet" href="../css/page.example.css"/>
<style type="text/css">
a:hover img {
border:solid 1px #ccc;
}
img {
background:#fff;
border:solid 1px #aaa;
}
</style>
</head>
<body>
<script type="text/javascript" src="../js/Uize.js"></script>
<h1 class="header">
<a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
<a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>
<div class="main">
<h1 class="document-title">
<a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
Wide Load
<div class="pageActionsShell">
<div id="page-actions" class="pageActions"><a href="source-code/wise-load.html" class="buttonLink">SOURCE</a></div>
</div>
</h1>
<!-- scrollable DIV containing lots and lots of thumbnail images -->
<center>
<div id="scrollingDiv" style="width:450px; height:280px; overflow:auto; background:#000; border:solid 1px #aaa; margin:0px; padding:0px;">
<table border="0" cellspacing="6" cellpadding="0">
<tr>
<td><a href="javascript://"><img id="firstImage" src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228277244419896914&max_dim=500"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228109666540948246&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228745103279879745&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228866001826566384&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228321774790917687&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228463251413365530&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228507796122097730&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228267745724726415&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228937676589416694&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228483162492178759&max_dim=105"/></a></td>
</tr>
<tr>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228855435929294206&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228496639998196479&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228623703668130129&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228897217554746467&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228554379238024970&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228550194293355740&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228234695931308619&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228580091324147918&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228074575082103294&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228118804591686444&max_dim=105"/></a></td>
</tr>
<tr>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228948359037055649&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228026937512483785&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228586025680090150&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228888824201666423&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228484030353525473&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228859576507617417&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228620264277935845&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228786228006249323&max_dim=105"/></a></td>
<td><a href="javascript://"><img src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228225341102196754&max_dim=105"/></a></td>
<td><a href="javascript://"><img id="lastImage" src="../images/blank.gif" width="105" height="75" alt="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228213464916914087&max_dim=105"/></a></td>
</tr>
</table>
</div>
</center>
</div>
<!-- JavaScript code to wire up the "wise load" behavior for the image thumbnails -->
<script type="text/javascript">
Uize.require (
[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'Uize.Dom.Basics',
'Uize.Dom.Pos'
],
function () {
'use strict';
/*** create the example page widget ***/
var page = window.page = UizeSite.Page.Example ({evaluator:function (code) {eval (code)}});
/*** wire up the page widget ***/
page.wireUi ();
/*** find all images that need "wise load" applied to them ***/
var
_imageNodes = Uize.Dom.Basics.find ({tagName:'IMG'}),
_imagesToLazyLoad = []
;
for (var _imageNo = -1; ++_imageNo < _imageNodes.length;)
_imagesToLazyLoad.push (_imageNodes [_imageNo])
;
/*** watch scrolling to watch for images becoming seen ***/
function loadImagesBecomingSeen () {
if (_imagesToLazyLoad.length) {
for (var _imageNo = -1; ++_imageNo < _imagesToLazyLoad.length;) {
var _image = _imagesToLazyLoad [_imageNo];
if (_image && Uize.Dom.Pos.getCoords (_image).seen) {
_image.src = _image.alt;
_imagesToLazyLoad.splice (_imageNo--,1);
}
}
}
}
Uize.Dom.Basics.wire ('scrollingDiv','scroll',loadImagesBecomingSeen);
loadImagesBecomingSeen ();
}
);
</script>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer