CODEWITHSUNDEEP
javascriptphpjqueryhtmllazy-loading
mrwhite
mrwhite

Reputation: 105

Loading 1000 images on one page

This is not a duplicate, I've already read the other questions about loading over 1.000 images in one page and applied the suggestions. This question is more related to how to deal with scrolling through those over 1.000 images.

I have applied the lazy loading and reduced the size of the photos to around 500k each. Also, in lazy loading im using a 1px data URI to make the requests as light as possible.

However, you can barely scroll down, its very laggy and it feels like your on a windows xp sp2 trying to play COD.

In the PHP snippet below I'm scanning a dir and getting all the images and returning an array with them:

function returnPhotos($path){
    $files = scandir($path);
    $files = array_diff(scandir($path), array('video', '.', '..'));
    $filesInArray = count($files);
    return $files;
}

Here I loop through the array and show the images

<div class="col-md-12" style="text-align:center;">
<?php 
  foreach($photoArray as $photo){
    echo "
      <div style='display:inline-block;position:relative;'>
      <label for='img".$counter."'>
        <img src='data:
image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=' data-src='".$path."".$photo."' style='max-height:250px;padding:2px;max-width:370px;min-width:184px;'>
      </label><br/>
    ";
?>
</div>

And here is the jquery lazy loading library that I'm using

/**
 * jQuery Unveil
 * A very lightweight jQuery plugin to lazy load images
 * http://luis-almeida.github.com/unveil
 *
 * Licensed under the MIT license.
 * Copyright 2013 Luís Almeida
 * https://github.com/luis-almeida
 */

;(function($) {

  $.fn.unveil = function(threshold, callback) {

    var $w = $(window),
        th = threshold || 0,
        retina = window.devicePixelRatio > 1,
        attrib = retina? "data-src-retina" : "data-src",
        images = this,
        loaded;

    this.one("unveil", function() {
      var source = this.getAttribute(attrib);
      source = source || this.getAttribute("data-src");
      if (source) {
        this.setAttribute("src", source);
        if (typeof callback === "function") callback.call(this);
      }
    });

    function unveil() {
      var inview = images.filter(function() {
        var $e = $(this);
        if ($e.is(":hidden")) return;

        var wt = $w.scrollTop(),
            wb = wt + $w.height(),
            et = $e.offset().top,
            eb = et + $e.height();

        return eb >= wt - th && et <= wb + th;
      });

      loaded = inview.trigger("unveil");
      images = images.not(loaded);
    }

    $w.on("scroll.unveil resize.unveil lookup.unveil", unveil);

    unveil();

    return this;

  };

})(window.jQuery || window.Zepto);

I found a site where it does the same thing, but it works pretty good, here: https://www.youtube.com/watch?v=c0c7aUh33ug

but mine works horribly, here:https://www.youtube.com/watch?v=jRuwzAzaShU

What can I change to make it load/work better?

Upvotes: 2

Views: 858

Answers (3)

Epirocks
Epirocks

Reputation: 502

It's going to depend on server response speed, and image size as well. Have you factored those two in to explain for the difference.

Upvotes: 1

Carson
Carson

Reputation: 152

some advice to you:

  1. compress your pictures (fits your apps as min as possible)
  2. pre-load image beside current window pictures(maybe you can pre-load picture outside of windows when need to show, pre-move to the right position)
  3. remove the oldest element to release memory(Removes elements that will not be used recently) so that you can keep browser faster and lighter

some words:

English is not my mother language if some words you can't understand. Please follow me some words

Upvotes: 0

mrwhite
mrwhite

Reputation: 105

As Sebastián Espinosa put it, the biggest problem is that for every picture the DOM is being modified. I've started from this and googled around and found out that if you set the exact height and width of the IMG element for every picture, they will have no problem loading even 5-7000 images on one page and if you add lazy loading to this, it works pretty good.

Now obviously, I'll have to determine which photos are landscape and which are portrait before displaying them so I can display them using proper scalling, but other than that, I think its alright.

Therefore, this question can be closed,

Upvotes: 1

Related Questions