Question

当我点击查看图片时，我试图制作一个全屏模式的图库。我必须检查图像的宽度或高度是否更大以设置模态的大小。但该功能似乎检查点击的上一个图像的尺寸。我正在将当前网站上传到http://pratinav.tk，它很快就会在线。 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>

您能否告诉我问题和/或解决方案的原因。如果没有，你能否给我另一种方法来实现模态。

Answer 1

将代码移到onload函数中。否则，它将在图像实际加载之前运行：

 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();
 };

Answer 2

imgCheck.onload函数以异步方式运行，因此在此函数返回之前，它不会设置islong变量。由于您在此功能中检查变量，因此您将获得旧值。任何依赖于新图像的内容都必须在onload函数中完成。

$('#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();
    };
});

功能保留旧变量值

2 个答案: