jQuery each is too fast

Question

I'm trying to add attribute data-size to my parent div.

Here is my code:

var width, height;
$(".galerie img").each(function() {
  width = this.naturalWidth;
  height = this.naturalHeight;
  $(this).parent().attr('data-size', width+'x'+height);
});

I have around 40 pictures on 1 page. On this way, not every of my div get 'data-size'. Sometimes only 1/2 of them, sometimes 1/3 of them or only 5 of them. How can I fix it?

are you using this in document.ready, means are you waiting till DOM gets ready — Farhan, Dec 15 '15 at 19:31
@SterlingArcher How can I select all of my ".galerie img" with for? — Trung Vu, Dec 15 '15 at 19:33
Without seeing an example of your HTML, it's hard to say what the problem is. I think you're assuming that `each` is "too fast", it could well be that there is another problem. — Lee Taylor, Dec 15 '15 at 19:33
try to use $(function(){} in $(window).on("load", function() {}); this is because i think not every images are fully loaded before each() run. check this http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin — Farhan, Dec 15 '15 at 19:33
my mistake @LeeTaylor, correct me if i am wrong. $(function(){...}) is equal to document.ready not window.ready — Farhan, Dec 15 '15 at 19:36
Are the images already in the html on load, or are they fetched with another script asynchronously? — Scottux, Dec 15 '15 at 19:38
You might want to also consider using image lazy loading: http://www.appelsiini.net/projects/lazyload — Mottie, Dec 15 '15 at 19:38

score 3 · Accepted Answer · answered Dec 15 '15 at 19:38

3

use document.ready in window.load. this is because not every images are loaded properly before each function fires

$(window).on("load", function() {
var width, height;
    $(document).ready(function(){
        $(".galerie img").each(function() {
          width = this.naturalWidth;
          height = this.naturalHeight;
          $(this).parent().attr('data-size', width+'x'+height);
        });
    });
});

answered Dec 15 '15 at 19:38

Farhan

1,453
2
15
20

window onload cannot guarantee all images are loaded – Roko C. Buljan Dec 15 '15 at 19:44
@RokoC.Buljan I have seen your answer and it looks pretty good to me. I have used my answer's code in one of my project and it does good there too. but your answer is more logical. – Farhan Dec 15 '15 at 19:47
for more reference http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin – Farhan Dec 15 '15 at 19:49

score 1 · Answer 2 · answered Dec 15 '15 at 19:42

Use a new Image() and wait for it's onload

var width,
    height;
$(".galerie img").each(function() {
  var $that = $(this);
  var img = new Image();
  img.onload = function(){
     width = this.naturalWidth;
     height = this.naturalHeight;
     $that.parent().attr('data-size', width+'x'+height);
  });
  img.src = this.src;
});

score 0 · Answer 3 · answered Dec 15 '15 at 19:38

I think the problem is that you are triggering the each when the images are not loaded. Maybe you should check if the last one is loaded before doing it

try to check it with something like this:

 if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {

or the imagesLoaded javascript library.

jQuery each is too fast

3 Answers3