Function retaining old variable values

Question

I'm trying to make an image gallery with a full screen modal popping up when you click view image. I want to check whether the image is greater in width or height to set the modal's size. But my functions is checking the dimensions of the previous image clicked.

JS

$('#photog .fa-eye').click(function() {
        //Getting the src for the img
        var modalBg = 'img/photog/' + $(this).parent().prev('img').attr('data-img');
        //Checking the dimension of the image
        var imgCheck = new Image();
        imgCheck.src = modalBg;
        imgCheck.onload = function() {
          if (this.naturalWidth > this.naturalHeight) {
            isLong = false;
          } else {
            isLong = true;
          }
        };
        //Getting the values for the viewport
        var bgWidth = 0.8*($(window).width());
        var bgHeight = 0.8*($(window).height());
        //Deleting the image object just to be sure
        delete imgCheck;
        //Setting the modal size according to viewport dimensions and image dimensions
        if (window.isLong) {
            $('.img-modal img').attr({src: (modalBg), width: 'auto', height: bgHeight});
        } else {
            $('.img-modal img').attr({src: (modalBg), height: 'auto', width: bgWidth});
        }
        $('.img-modal').fadeIn();
    });

HTML

<section id='photog">
    <div class="photo">
        <img data-img="pic6.jpg" alt="">
         <div class="img-op">
              <span class="fa.fa-eye"></span>
          </div>
    </div>
</section>

<div class="img-modal">
    <span class="fa fa-times"></span>
    <img alt="">
</div>

Check this question http://stackoverflow.com/questions/12570834/how-to-preview-image-get-file-size-image-height-and-width-before-upload — Anto king, Jul 26 '15 at 12:10
The `load` event of the image happens in an asynchronous fashion – you can not just continue with your code in the following lines, and expect the result to be available already. — CBroe, Jul 26 '15 at 12:15
possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — CBroe, Jul 26 '15 at 12:15
@AntoKing Thanks, but not exactly my answer. I have tried a similar approach. It could be better if you could analyse my code yourself and try to identify any errors. — deleted, Jul 26 '15 at 12:25

score 1 · Accepted Answer · answered Jul 26 '15 at 12:16

Move your code inside the onload function. Otherwise, it will run before the image has actually loaded:

 imgCheck.onload = function() {
   var bgWidth = 0.8*($(window).width());
   var bgHeight = 0.8*($(window).height());
   if (this.naturalWidth > this.naturalHeight) {
     $('.img-modal img').attr({src: (modalBg), height: 'auto', width: bgWidth});
   } else {
     $('.img-modal img').attr({src: (modalBg), width: 'auto', height: bgHeight});
   }
   $('.img-modal').fadeIn();
 };

score 1 · Answer 2 · answered Jul 26 '15 at 12:17

The imgCheck.onload function runs asynchronously, so it doesn't set the islong variable until after this function returns. Since you're checking the variable in this function, you're getting the old value. Anything that depends on the new image has to be done in the onload function.

$('#photog .fa-eye').click(function() {
    //Getting the src for the img
    var modalBg = 'img/photog/' + $(this).parent().prev('img').attr('data-img');
    //Checking the dimension of the image
    var imgCheck = new Image();
    imgCheck.src = modalBg;
    imgCheck.onload = function() {
        var isLong;
        if (this.naturalWidth > this.naturalHeight) {
            isLong = false;
        } else {
            isLong = true;
        }
        //Getting the values for the viewport
        var bgWidth = 0.8*($(window).width());
        var bgHeight = 0.8*($(window).height());
        //Deleting the image object just to be sure
        delete imgCheck;
        //Setting the modal size according to viewport dimensions and image dimensions
        if (isLong) {
            $('.img-modal img').attr({src: (modalBg), width: 'auto', height: bgHeight});
        } else {
            $('.img-modal img').attr({src: (modalBg), height: 'auto', width: bgWidth});
        }
        $('.img-modal').fadeIn();
    };
});

To add to this: I would set the `load` event before assigning the `src` or it might not be dispatched at all. And I would remove `delete imgCheck;`. — Sebastian Nette, Jul 26 '15 at 12:19
Do you have a reference for the need to assign the properties in the right order? — Barmar, Jul 26 '15 at 12:20
@Barmar I don't have a reference at hand, but I remember that we ran into issues like that some time ago when the image was pulled from the cache. Probably all modern browsers do dispatch the event regardless of the order now, not sure when IE fixed that. I always prefer to support as many browsers as possible especially if it's just moving 1 line around. As for `delete imgCheck;` that simply doesn't work. — Sebastian Nette, Jul 26 '15 at 12:38

Function retaining old variable values

2 Answers2