Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post

    Load 1000 images smartly

    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?

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You need to try to pre-load as many of them as you can before people get to that page - or alternatively split it up into several pages (possibly 30 or so pages would be reasonable for that number of images.

    If you are only displaying a few to start with and action is required to replace them with more then use 'just in time' pre-loading where you load the next one or two images while your visitor is viewing the prior one.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by felgall View Post
    You need to try to pre-load as many of them as you can before people get to that page - or alternatively split it up into several pages (possibly 30 or so pages would be reasonable for that number of images.

    If you are only displaying a few to start with and action is required to replace them with more then use 'just in time' pre-loading where you load the next one or two images while your visitor is viewing the prior one.
    Well that will not work for me as I will give one example, see this test page
    http://bloghutsbeta.blogspot.com/201...ting-2_04.html

    Right now I don't have 1000 images but e-g when I will have 1000 images then you can imagine those methods will not work, what should I do for this kind of scenario, by the way I am using quicksand jquery plugin by razorjet (I guess) which always require callback function when you add javascript to the items.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    it's already too slow with the number of images you have running the code you are using.

    that quicksand plugin in particular is going to be a real performance killer, but even 250 images on a page with no JS is going to be flaky for most users.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    Yeah, for starters, write your own code. You can get the same effects in just a few lines of JS.

    You *could* use preload for all the images that don't appear on the front "page", so that when the user selects (example) "bowling" only then will it need all the bowling images and, in the meantime, you have preloaded them.

    But another way to do this would be to load *ONE* image per category and use an image map. However, that won't let you achieve your cute trick of rotating the image a little when it is selected. You'd have to find some other equivalent way of highlighting the selections.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    Yeah, for starters, write your own code. You can get the same effects in just a few lines of JS.

    You *could* use preload for all the images that don't appear on the front "page", so that when the user selects (example) "bowling" only then will it need all the bowling images and, in the meantime, you have preloaded them.

    But another way to do this would be to load *ONE* image per category and use an image map. However, that won't let you achieve your cute trick of rotating the image a little when it is selected. You'd have to find some other equivalent way of highlighting the selections.
    Well the front page shows all images, the buttons like bowling and others are just organizers that uses images out of the images that are displayed in the front page (front page is the button 'ALL') if somehow there is a way that all image won't load and they load when the user scrolls or when any of the buttons like you mentioned 'bowling' is clicked, I don't know how to stop or control all images from loading. I have heard about infinite scroll but I have no idea how to use it with this plugin, as this plugin needs a callback for every extra script that is added to it


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •