1

Not sure am I had missused new Image(), I'm experiencing strange order of object of my json object using below code.

 $.ajax({
      type: 'GET',
      url: '/' + getUsername() + '/photos',
      success: function(data) {

        if (data.length > 0) {
          $.each(data, function() {

            var caption = this.caption
            var albumPhoto = '';

            albumPhoto = 'http://example.com/' + this.photo;

            var temp_img = new Image(),
              albumPhotoWidth, albumPhotoHeight

            temp_img.src = albumPhoto;
            temp_img.onload = function() {


              var photosObj = {
                src: albumPhoto,
                title: caption,
                w: this.naturalWidth,
                h: this.naturalHeight
              };

              pswpAlbum_Items.push(photosObj);

            }
          });
        }

      }
    });
    }

pswpAlbum_Items result is not consistent, the order of my photo is not consistent, I found the bug when I try in private mode where browser never get cached images. Any clue why?

Ergec
  • 11,608
  • 7
  • 52
  • 62
Jenny Mok
  • 2,744
  • 9
  • 27
  • 58
  • 2
    `onload` is async, so the ordering of the output will depend on the order the image requests are filled by your server. – Rory McCrossan Nov 07 '16 at 13:30
  • The order will be random (ish) because it's [async](http://stackoverflow.com/a/14220323/542251). – Liam Nov 07 '16 at 13:44
  • As per @RoryMcCrossan point in a non-session based situation the server will multi-thread image delivery and there is no way to enforce sequence of delivery. You could assume that smaller files would 'arrive' before larger but even that is not guaranteed. If you must know when each and all images are fully delivered, such as when requiring to measure for layout purposes, the you may find the ImagesLoaded utility from http://imagesloaded.desandro.com/ of use as it does this and more. – Vanquished Wombat Nov 07 '16 at 13:59

2 Answers2

0

your images are likely loading at different times. You should consider adding them to the array outside of the onload event or use an object as a map and use the index param from the callback for each.

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
  • add them outside of the onload? then how I can preload them? And I don't get your second suggestion. – Jenny Mok Nov 07 '16 at 13:30
  • 1
    Why are you pre-loading images? This smells of an [XY problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) – Liam Nov 07 '16 at 13:44
  • because I'm using photoswipe where it needs photo dimension. – Jenny Mok Nov 07 '16 at 13:53
0

I believe you're trying to load images to photoswipe with unknown dimensions right?

You may try this

var items = [ 
  { src: 'http://........', w:0, h:0 },
  { src: 'http://........', w:0, h:0 }
];

var gallery = new PhotoSwipe( ..... );
gallery.listen('gettingData', function(index, item) {
        if (item.w < 1 || item.h < 1) { // unknown size
        var img = new Image(); 
        img.onload = function() { // will get size after load
        item.w = this.width; // set image width
        item.h = this.height; // set image height
           gallery.invalidateCurrItems(); // reinit Items
           gallery.updateSize(true); // reinit Items
        }
    img.src = item.src; // let's download image
    }
});

gallery.init();

Source: https://github.com/dimsemenov/PhotoSwipe/issues/796

Ergec
  • 11,608
  • 7
  • 52
  • 62
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/14215835) – Serjik Nov 07 '16 at 16:14
  • @Serjik I foresee his problem and what he's trying to do, provide a solution for his root problem using plugin's own github page, and get down votes. Funny. – Ergec Nov 07 '16 at 19:13