Javascript jQuery只在IE中显示一次Image元素。 FF工作

Question

当我按下小缩略图时，我想显示一个大图像。一个简单的灯箱样式脚本。

当我按下图像周围的灰色透明覆盖区域时，CSS和图像将从视图中移除。此代码已被删除。也许错过了需要的东西...

$(document).ready(function() {  
    $(".lightBobo").click(function(e) { 
     e.preventDefault(); // prevent to open link in new window 
     $(this).lightBobo(); 
    }); 
}); 

jQuery.fn.lightBobo = function(e) { 
    if (e != undefined) 
     e.preventDefault(); 

    return this.each(function() { 
     var img = new Image(); 

     $(img).load(function() { 
      imgW = img.width; 
      imgH = img.height; 

      var overlay = $("<div />"); 
      var container = $("<div />"); 
      // Lots of css styling for <div> overlay and container image... 

      container.append(img); //add image to div 
      $("body").append(overlay); //add overlay to body 
      $("body").append(container); //add div to body 
      overlay.fadeIn("fast", function() { 
       container.show(); 
      }); 
      $(overlay).click(function() { 
       removeDivs(); 
      }); 
      function removeDivs() { 
       container.hide(); 
       overlay.fadeOut("fast"); 
       img = null; 
       container = null; 
       overlay = null; 
       openImgSrc = ""; 
      } 
     }); 
    }); 
} 

问题是IE（7）没有显示图像第二次我想要显示它。我必须做一个页面重新加载才能再次显示图像。它虽然工作在FF。

当我使用FireFox时，我可以在FireBug中看到每次显示大图像时都会附加到后面。 “旧”图像显示：无; 20次后，我展示了大图，我有40个元素的覆盖和容器（图片）。

我不知道如何在需要时重新运行lightBobo函数。所以它在IE和FF都有效。

Answer 1

我已经找到了解决办法。我改变了很多代码。特别是$(img).load(function() { ... }我遇到了一些问题。我真的不知道为什么load（）函数不想多次启动事件。所以我删除了该函数中的大部分代码。

请记住$(img).load(function() { ... }用于在查找宽度和高度之前加载图像。否则为0.

$(document).ready(function() { 

    $(".lightBobo").click(function(e) { 
     if (e != undefined) 
      e.preventDefault(); 
     $(this).lightBobo(); 
    }); 
}); 

jQuery.fn.lightBobo = function(e) { 
    return this.each(function() { 

     var myClickedObj = $(this); 
     //check if we have a anchor or image tag 
     var src = ""; 
     if (this.tagName.toLowerCase() == "a") 
      src = this.href.toLowerCase(); 
     else if (this.tagName.toLowerCase() == "img") 
      src = this.src.toLowerCase(); 
     else 
      return; 

     var winW = $(window).width(); 
     var winH = $(window).height(); 
     var docH = $(document).height(); 
     if (docH < winH) 
      docH = winH; 

     //the semitransparant overlay over the whole page 
     var overlay = $("<div />") 
      .attr("class", "bobOverlay") //used as id for closing all overlays 
      .css("background", "#000") 
      .css("opacity", "0.8") 
      .css("display", "none") 
      .click(function() { hideAll(); }) 

     $("body").append(overlay); //add overlay to body 

     var loadLeft = (winW/2) - (100/2); 
     var loadTop = (winH/2) - (20/2) + $(document).scrollTop(); 

     overlay.fadeIn("fast"); 

     //an element to hold our picture 
     var container = $("<div />"); 
     container.attr("class", "bobOverlay"); 
     container.hide(); 

     var img = new Image(); 
     $(img).load(function() { 
      var imgW = img.width; 
      var imgH = img.height; 

      container.append(this); //add the picture to the container 
     $("body").append(container); // add container to the body 
      container.fadeIn("fast"); //show container 
     }) 
    .attr("src", src); //add the src to the image 

     function hideAll() { 
      $(".bobOverlay").fadeOut("fast"); 
     } 
     function IsImage(filename) { 
      var ext = filename.split('.').pop().toLowerCase(); 
      var allow = new Array("gif", "png", "jpg", "jpeg", "bmp"); 
      if (jQuery.inArray(ext, allow) == -1) { 
       return false; 
      } 
      return true; 
     } 
    }); 
} 

对不起，长代码。并找到答案我自己...

Answer 2

您应该在初始化时只附加覆盖层和容器一次，然后在用户激活模式时仅显示/隐藏/附加内容。

否则你需要在每个元素上做.remove()（= null是不够的），除非你想在DOM中做大量的重复。

我会做这样的事情：

(function($) { 

var lightBobo = { 
    init: function() { 
     var self = this; 
     this.overlay = $('<div>').click(this.hide); // bind the click event just once 
     this.container = $('<div>'); 
     // apply id's or styling 
     $(document.body).append(overlay,container); 
    } 
    hide: function(e) { 
     lightBobo.container.hide(); 
     lightBobo.overlay.fadeOut('fast'); 
    }, 
    show: function() { 
     var img = new Image(); 
     $(img).load(function() { 
      imgW = img.width; 
      imgH = img.height; 
      lightBobo.container.append(img); //add image to div 
      lightBobo.overlay.fadeIn("fast", function() { 
       lightBobo.container.show(); 
      }); 
     }); 
    } 
}; 

$(function() { 
    lightBobo.init(); // init the lightbox once 
}); 

$.fn.lightBobo = function() { 
    return this.each(function() { 
     lightBoo.show.apply(this); 
    }); 
} 

})(jQuery); 


// bind the anchors here: 

$(document).ready(function() { 
    $(".lightBobo").click(function(e) { 
     e.preventDefault(); // prevent to open link in new window 
     $(this).lightBobo(); 
    }); 
});