I was looking for a solution to load a large number of images on one page.
\nThe problem, however, was the loading speed on a client side where 200-300
\nthumbnails would take forever to load in a browser.<\/p>\n
I did some research and found a few techniques such as “JavaScript Paging<\/strong>”\u00a0and “Lazy Load<\/strong>” to handle so many images on one page. So, I came up with my own “Lazy Load” solution which uses a few lines of plain old JavaScript. Code explanation<\/strong><\/p>\n Let’s say we populate the global JavaScript array with image paths like this When the page is loaded, we initialize the function which draws all images but the source In the code above I create a new array imageMap which stores the reference to the cell for quick access to image source swap (but this is later). To make things nicer I added onmouseover<\/span> and onmouseout<\/span> events to change the background color of the cell we are in. Feel free to ignore this functionality.<\/p>\n The last function checkImages()<\/span> is where the soup is being cooked. It is invoked on load as we saw above and on window scrolling and resizing:<\/p>\n Finally, let’s take a close look at what the function is doing:<\/p>\n First, we find the size of the Viewport (the distance from the very top of the page to the bottom of your browser including scrolled distance). Then we loop through imageMap<\/span> array to check if the cell is within the Viewport, i.e. visible on screen. If so, we must show the actual true source of the image which is done in this function:<\/p>\n I hope this is helpful. Please check Lazy Load with Plain JavaScript demo page<\/a> and feel free to steal the code from there by viewing the page source.<\/p>\n","protected":false},"excerpt":{"rendered":" I was looking for a solution to load a large number of images on one page. The problem, however, was the loading speed on a client side where 200-300 thumbnails would take<\/p>\nRead More...<\/a>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-9","post","type-post","status-publish","format-standard","hentry","category-javascript"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/dev.vunet.us\/index.php\/wp-json\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.vunet.us\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.vunet.us\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.vunet.us\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.vunet.us\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":1,"href":"https:\/\/dev.vunet.us\/index.php\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"predecessor-version":[{"id":10,"href":"https:\/\/dev.vunet.us\/index.php\/wp-json\/wp\/v2\/posts\/9\/revisions\/10"}],"wp:attachment":[{"href":"https:\/\/dev.vunet.us\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.vunet.us\/index.php\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.vunet.us\/index.php\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nThe idea is not to load all of them at once. However, my favorite technique I chose “Lazy Load” required\u00a0some additional components like Prototype or JQuery libraries to be used.\u00a0With those third party frameworks, it is quite easy to implement the solution but more difficult
\nto customize and control the code. Moreover, the resources used by a client when loading heavy
\nlibraries, especially Prototype, to use a tiny bit of their code do not seem to be the best idea.<\/p>\n
\nThe demo of the Lazy Load<\/a>
\nis here (http:\/\/vunet.us\/demo\/lazyload\/<\/a>).<\/p>\n
\n
\nvar imgSrcMap = new Array();
\nimgSrcMap[0] = \"lazyloadimages\/N08422-1-lr-1.jpg\";
\nimgSrcMap[1] = \"lazyloadimages\/N08422-2-lr-1.jpg\";
\n<\/code>
\nand so on… We can do it with any server side page in ASP or PHP looping through
\nall images in a folder or database.<\/p>\n
\nof each image would be a tiny 1\u00d71 pixel image for every image we draw:<\/p>\nvar imageMap = new Array();
\nfunction loadImageTables(){
\nvar table = document.createElement(\"table\");
\nvar defaultCell = document.createElement(\"TD\");
\ndefaultCell.className = \"imageContainerCell\";
\ndefaultImg = document.createElement(\"img\");
\ndefaultImg.src=\"lazyloadimages\/grey.gif\";
\ndefaultImg.border = \"0\";
\ndefaultImg.width = \"80\";
\ndefaultImg.height = \"80\";
\ndefaultCell.appendChild(defaultImg);
\nfor(var i=0; i<imgSrcMap.length;i++){
\nif(i==0||i%4==0){\/\/4 thumbs per row
\nvar row = table.insertRow(table.rows.length);
\n}
\nvar cell = defaultCell.cloneNode(true);
\ncell.onmouseover = hoverImgCell;
\ncell.onmouseout = outImgCell;
\nrow.appendChild(cell);
\nimageMap[i] = cell;\/\/store reference to image
\n}
\nvar container = document.getElementById(\"imageContainer\");
\nif(container){ container.appendChild(table); }
\ncheckImages();\/\/load initial viewport
\n}
\n<\/code><\/p>\n
\nwindow.onscroll = checkImages;
\nwindow.onresize = checkImages;
\n<\/code><\/p>\n
\nfunction checkImages() {
\nvar viewportSize = document.body.scrollTop + document.body.clientHeight;
\nfor (var i = imageMap.length; i > 0; i\u2013){
\nvar index = i-1;
\nvar el = imageMap[index];
\nif (viewportSize > el.offsetTop){
\nloadImage(index);
\nimageMap.splice(index,1);\/\/delete to avoid looping over
\nimgSrcMap.splice(index,1);\/\/delete to match array above
\n}
\n}
\n}
\n<\/code><\/p>\n
\nfunction loadImage(i) {
\nif(imageMap[i].firstChild.src != imgSrcMap[i]){
\nimageMap[i].firstChild.src = imgSrcMap[i];
\n}
\n}
\n<\/code>
\nWe simply swap the old 1\u00d71 pixel with the real one. The true image is now loaded.
\nTo avoid looping through the same elements of array of images which are already loaded,
\nwe remove all loaded images from array as the last step in function checkImages()<\/span>.<\/p>\n