4 Replies - 8411 Views - Last Post: 15 April 2012 - 03:56 AM

#1 cryoffalcon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 03-February 11

load 1000 images smartly

Posted 13 April 2012 - 01:45 AM

Hi,
well I have like 1000 images on the same page, unfortunately I can't use sprites on them, as the number of images increases continuously. So you can imagine it sends 1000 http requests, so it takes lots of time for the images to load plus it's not good experience for the visitors.
I have seen one of the scripts named as Lazy Load, but I was thinking if there is more SMARTER WAY of loading images (good regarding SEO, loads images faster and is good for user experience).
So, I was wondering if there is a way out to loading images in a better way?

Is This A Good Question/Topic? 0
  • +

Replies To: load 1000 images smartly

#2 Ken_g6  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 13-April 12

Re: load 1000 images smartly

Posted 13 April 2012 - 05:53 PM

View Postcryoffalcon, on 13 April 2012 - 01:45 AM, said:

well I have like 1000 images on the same page, unfortunately I can't use sprites on them, as the number of images increases continuously.

Can you elaborate on this? Does the number of images increase while the page is displayed via AJAX? Or is it a case that there will be more images the next time the same page is loaded?

Ideas that occur to me include:
- Having several smaller CSS sprites, in the same way Google Maps breaks up a map into small areas.
- Generating a single CSS sprite image on-demand on the server, with ImageMagick or the like, if you have enough power on the server side.
- Sending the images as data URIs if the images are usually displayed only once per page - although IE7 and before don't support this, and IE8 would be limited to 32kb per image.
Was This Post Helpful? 0
  • +
  • -

#3 cryoffalcon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 03-February 11

Re: load 1000 images smartly

Posted 14 April 2012 - 09:56 AM

View PostKen_g6, on 13 April 2012 - 05:53 PM, said:

View Postcryoffalcon, on 13 April 2012 - 01:45 AM, said:

well I have like 1000 images on the same page, unfortunately I can't use sprites on them, as the number of images increases continuously.

Can you elaborate on this? Does the number of images increase while the page is displayed via AJAX? Or is it a case that there will be more images the next time the same page is loaded?

Ideas that occur to me include:
- Having several smaller CSS sprites, in the same way Google Maps breaks up a map into small areas.
- Generating a single CSS sprite image on-demand on the server, with ImageMagick or the like, if you have enough power on the server side.
- Sending the images as data URIs if the images are usually displayed only once per page - although IE7 and before don't support this, and IE8 would be limited to 32kb per image.


Well I will elaborate the idea by giving you link to this page http://bloghutsbeta....sting-2_04.html
Its a test page, it doesn't have 1000 images but when it will have 1000 images then it will be a big issue, as it will load all images at same time, I am using quicksand plugin here, so is there any solution that comes up in your mind?
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4240
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: load 1000 images smartly

Posted 14 April 2012 - 03:05 PM

You could use something like the JAIL jQuery plugin. It allows you to hold of on loading images until they are actually visible on the screen, so you don't have to load everything at once. This also saves you a lot of bandwidth if people generally don't scroll down through all your images.

It's actually very easy to use, as well. You just add jQuery and the jail script to your HTML: (You'll need to download the jail.min.js script from the above URL.)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jail.min.js"></script>


Then you'd somehow "highlight" the images you mean to be loaded with the JAIL effect, by for example adding a class to them:
<img class="delayed" src="images/1.jpg" alt="Image 1"/>
<img class="delayed" src="images/2.jpg" alt="Image 2"/>
<img class="delayed" src="images/N.jpg" alt="Image N"/>


And then you just set the JAIL effect in a jQuery ready callback:
$(function() {
	// Assuming you put a "delayed" class on all
	// images you want to load when viewed.
	var imgs = $("img.delayed");
	
	// To avoid having to mess up the actual HTML to fit
	// the JAIL attribute requirements, this will instead
	// modify it here, allowing you to use the normal "src"
	// attribute in the HTML.
	imgs.each(function() {
		var self = $(this);
		self.attr("data-src", self.attr("src"));
		self.attr("src", "images/placeholder.png");
	});
	
	// And this triggers the JAIL effect on those images.
	imgs.jail();
});


And that should be it.
Was This Post Helpful? 0
  • +
  • -

#5 cryoffalcon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 03-February 11

Re: load 1000 images smartly

Posted 15 April 2012 - 03:56 AM

View PostAtli, on 14 April 2012 - 03:05 PM, said:

You could use something like the JAIL jQuery plugin. It allows you to hold of on loading images until they are actually visible on the screen, so you don't have to load everything at once. This also saves you a lot of bandwidth if people generally don't scroll down through all your images.


Thanks for a new wonderful idea, I have a few questions, is it better than INFINITE SCROLL?
You have used if people don't scroll, it means if they scroll then this plugin's worth is gone as then all images will start loading at the same time?
And the last question you said that the code you provide is a callback, can you tell me to which area will your code go as a callback
Here is the code
&lt;script type=&quot;text/javascript&quot;&gt;
(function($) {
 $.fn.sorted = function(customOptions) {
  var options = {
   reversed: false,
   by: function(a) {
    return a.text();
   }
  };
  $.extend(options, customOptions);
 
  $data = $(this);
  arr = $data.get();
  arr.sort(function(a, B)/> {
   
      var valA = options.by($(a));
      var valB = options.by($(B)/>);
   if (options.reversed) {
    return (valA &lt; valB) ? 1 : (valA &gt; valB) ? -1 : 0;    
   } else {  
    return (valA &lt; valB) ? -1 : (valA &gt; valB) ? 1 : 0; 
   }
  });
  return $(arr);
 };

})(jQuery);

$(function() {
  
  var read_button = function(class_names) {
    var r = {
      selected: false,
      type: 0
    };
    for (var i=0; i &lt; class_names.length; i++) {
      if (class_names[i].indexOf('selected-') == 0) {
        r.selected = true;
      }
      if (class_names[i].indexOf('segment-') == 0) {
        r.segment = class_names[i].split('-')[1];
      }
    };
    return r;
  };
  
  var determine_sort = function($buttons) {
    var $selected = $buttons.parent().filter('[class*=&quot;selected-&quot;]');
    return $selected.find('a').attr('data-value');
  };
  
  var determine_kind = function($buttons) {
    var $selected = $buttons.parent().filter('[class*=&quot;selected-&quot;]');
    return $selected.find('a').attr('data-value');
  };
  
  var $preferences = {
    duration: 800,
    easing: 'easeInOutQuad',
    adjustHeight: 'dynamic'
  };
  
  var $list = $('#data');
  var $data = $list.clone();
  
  var $controls = $('ul#gamecategories ul');
  
  $controls.each(function(i) {
    
    var $control = $(this);
    var $buttons = $control.find('a');
    
    $buttons.bind('click', function(e) {
      
      var $button = $(this);
      var $button_container = $button.parent();
      var button_properties = read_button($button_container.attr('class').split(' '));      
      var selected = button_properties.selected;
      var button_segment = button_properties.segment;

      if (!selected) {

        $buttons.parent().removeClass('selected-0').removeClass('selected-1').removeClass('selected-2');
        $button_container.addClass('selected-' + button_segment);
        
        var sorting_type = determine_sort($controls.eq(1).find('a'));
        var sorting_kind = determine_kind($controls.eq(0).find('a'));
        
        if (sorting_kind == 'all') {
          var $filtered_data = $data.find('li');
        } else {
          var $filtered_data = $data.find('li.' + sorting_kind);
        }
        
        if (sorting_type == 'size') {
          var $sorted_data = $filtered_data.sorted({
            by: function(v) {
              return parseFloat($(v).find('span').text());
            }
          });
        } else {
          var $sorted_data = $filtered_data.sorted({
            by: function(v) {
              return $(v).find('strong').text().toLowerCase();
            }
          });
        }
        
        $list.quicksand($sorted_data, $preferences, function () { $(this).tooltip (); } );
        
      }
      
      e.preventDefault();
    });
    
  }); 

var high_performance = true;  
  var $performance_container = $('#performance-toggle');
  var $original_html = $performance_container.html();
  
  $performance_container.find('a').live('click', function(e) {
    if (high_performance) {
      $preferences.useScaling = false;
      $performance_container.html('CSS3 scaling turned off. Try the demo again. &lt;a href=&quot;#toggle&quot;&gt;Reverse&lt;/a&gt;.');
      high_performance = false;
    } else {
      $preferences.useScaling = true;
      $performance_container.html($original_html);
      high_performance = true;
    }
    e.preventDefault();
  });
});
&lt;/script&gt;


As the code you provided if its not for callback then it won't work with the quicksand plugin that I am using as it removes the functionality of script whenever you click on those buttons that are for filtering or sorting.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1