IE8中jQuery.load()加載頁面不顯示的原因

一、jQuery.load()

  jQuery.load(url,[data],[callback])通過Ajax異步請求加載服務器中的數據，并把數據放到指定元素中。

•url ：請求服務器的地址
•data ：可選項，請求時發送的數據
•callback ：可選項，請求成功后的回調函數

例：

$(".content").load(" https://www.imooc.com/data/fruit_part.html ")

二、IE8中使用jQuery.load()加載頁面無法顯示的原因

  首先，在IE8中，是可以使用jQuery.load()方法的（在兼容IE的jQuery版本下）

  原因：在被加載頁面中存在沒有成對閉合的html標簽，如<div>

下面介紹下jquery中的load()方法使用要點

今天做在線聊天網頁，聊天可以配圖，需要使用彈出層的方式瀏覽大圖效果。總共三層，底層html主結構，中間半透明遮罩，頂層是縮略圖放大后的大圖。用戶點擊縮略圖后在半透明遮罩上呈現大圖。

　　因為在線聊天，圖片數量和地址都是動態未知的，因此用戶點擊縮略圖時，應該在body下動態生成一個大圖元素，并居中顯示。代碼如下：

$(".smallImg").click(function(){
 var imgPath = $(this).attr("src");
 var zh_bigImg = "<img alt='大圖' class='zh_bigImg'/>"
 var maskBg = "<div class='maskDiv'></div>"
 $("body").append(zh_bigImg).append(maskBg);
 $(".zh_bigImg").attr("src",imgPath); //將獲取的縮略圖src值賦給新生成的大圖
 //以下代碼用于設置大圖的居中顯示，先設置大圖的css為絕對定位，且top:50%;left:50%.
 var bigImgTop = -$(".zh_bigImg").height()/2;
 var bigImgLeft = -$(".zh_bigImg").width()/2;
 $(".zh_bigImg").css({
 "margin-top":bigImgTop,
 "margin-left":bigImgLeft
 });
 var zhBigImg = $(".zh_bigImg").get(0); //將jq對象轉化為js對象
 zhBigImg.onclick=function(){
 $(".zh_bigImg,.maskDiv").fadeOut(function(){
 $(this).remove(); //淡出效果完成后再移除此元素！
 });
 }
 }); 

　　當剛剛將縮略圖的src賦給大圖時，就來獲取大圖高度值和寬度值，這樣似乎不妥。結果卻是這樣，新生成的大圖位置始終在top:50%；left:50%處，F12打開調試窗口發現margin-top，margin-left都為0，在各大瀏覽器或多或少都會存在一些問題，時而有效時而無效。后來才發現，忘了使用load()方法。應該讓大圖加載完畢后，再來獲取高度和寬度值。

 改為這樣：

$(".zh_bigImg").load(function(){
 var bigImgTop = -$(this).height()/2;
 var bigImgLeft = -$(this).width()/2;
 $(this).css({
 "margin-top":bigImgTop,
 "margin-left":bigImgLeft
 });
}) 

    　后就正常了。

此外，jquery在處理頁面動態創建的元素方面，好多地方都需要注意。它不會響應動態創建的元素的事件，只有用live()方法來綁定事件，才能解決問題（直接用原生的js不知道行不行）。比如點擊大圖，應該是清除這個元素。

$(".zhBigImg").click(function(){$(this).remove()}),點擊大圖時頁面是不會有任何響應的。改為:$(".zhBigImg").live('click',function(){$(this).remove()})則可以。

總結

以上所述是小編給大家介紹的IE8中jQuery.load()加載頁面不顯示的原因，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com