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