Improve performance for lots of thumbnails? about viewer HOT 5 CLOSED

@yavuz Unfortunately, I cannot show my example code but I can try to explain through the changes. We used the unveil jquery plugin in the following manner:
In viewer.js, we edited the constructor function Viewer(element, options) { to add the below line:
this.unveilImages = false;

Then, we edited the renderList function to insert the below code:

      // Unveil jQuery plugin is being used for lazy loading of thumbnail images.
      // A maximum of 20 thumbnails will be loaded upon opening of the Image Viewer.
      // As user navigates using Next/Previous buttons, further thumbnails will be loaded asynchronously.
      if (this.unveilImages) {
    	  if (this.length >= 20) {
    		  var elements;
    		  if (i <= 9) {
    			  elements = $("img.lazyImage").slice(0, 20);
    		  } else {
    			  elements = $("img.lazyImage").slice(i - 10, i + 10);
    		  }
    		  elements.unveil();
    	  } else {
    		  $("img.lazyImage").unveil();
    	  }
      }

We added the following new function too:

    toggleUnveil : function() {
    	this.unveilImages = true;
    },

We edited the existing function initList to add the class lazyImage and attribute data-src when rendering the images:

list.push(
          '<li>' +
            '<img' +
              ' class="lazyImage" ' +
              ' data-src="' + dataSrc + '"' +
              ' src="' + src + '"' +
              ' data-action="view"' +
              ' data-index="' +  i + '"' +
              ' data-original-url="' +  (url || src) + '"' +
              ' alt="' +  alt + '"' +
            '>' +
          '</li>'
        );

where dataSrc is obtained via a call:
var dataSrc = this.getAttribute('data-actualurl') || src;

In our calling code, we have to a reference to the files viewer.js and jquery.unveil.js. Then our javascript call is:

$j(function($) {
	var modalViewerOptions = {
		url: 'data-original',
		shown: function(e) {
			$(this).viewer('toggleUnveil');
		}
	};

	// show 'modal' image viewer
	$('#invokeImageViewer').on('click', function(e) {
		e.preventDefault();
		$('#hiddenThumbs').viewer(modalViewerOptions).viewer('show');
	});
});

An actual thumbnail image:
<img src="commonImage.png" data-actualurl="actualThumbnailImage.png" alt="Image description" data-original="actualFullSizeImage.png"/>

Hope that helps you get started.

from viewer.

Just download the images page by page, and each time one page images loaded, call the update method to add them to the viewer.

from viewer.

Thanks for your reply..

from viewer.

We managed to find a way to lazy load the thumbnails using the following lightweight jquery plugin: http://luis-almeida.github.io/unveil/

Initially, the 800 thumbnails on the page are hidden and they each have a common placeholder image. We are then calling unveil function on a subset of the images (about 21 images) which goes to replace the placeholder image with the actual image. As the user navigates the thumbnails, the thumbnails are being replaced with their actual images URLs too.

from viewer.

@nabeygun How did you do that? Can you share example code? Unfortunately I could not.

@fengyuanchen Also when I update, the viewer always turn first image. Is this normal?

from viewer.