快捷導(dǎo)航

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

更新時(shí)間：2018年11月15日 08:36:19 作者：crackedlove

這篇文章主要介紹了IE8中jQuery.load()加載頁(yè)面不顯示的原因，在文中給大家介紹了jquery中l(wèi)oad()方法的使用要點(diǎn),需要的朋友可以參考下

一、jQuery.load()

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

•url ：請(qǐng)求服務(wù)器的地址
•data ：可選項(xiàng)，請(qǐng)求時(shí)發(fā)送的數(shù)據(jù)
•callback ：可選項(xiàng)，請(qǐng)求成功后的回調(diào)函數(shù)

例：

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

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

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

原因：在被加載頁(yè)面中存在沒(méi)有成對(duì)閉合的html標(biāo)簽，如<div>

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

今天做在線聊天網(wǎng)頁(yè)，聊天可以配圖，需要使用彈出層的方式瀏覽大圖效果?？偣踩龑樱讓觝tml主結(jié)構(gòu)，中間半透明遮罩，頂層是縮略圖放大后的大圖。用戶點(diǎn)擊縮略圖后在半透明遮罩上呈現(xiàn)大圖。

　　因?yàn)樵诰€聊天，圖片數(shù)量和地址都是動(dòng)態(tài)未知的，因此用戶點(diǎn)擊縮略圖時(shí)，應(yīng)該在body下動(dòng)態(tài)生成一個(gè)大圖元素，并居中顯示。代碼如下：

$(".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值賦給新生成的大圖
   //以下代碼用于設(shè)置大圖的居中顯示，先設(shè)置大圖的css為絕對(duì)定位，且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對(duì)象轉(zhuǎn)化為js對(duì)象
       zhBigImg.onclick=function(){
         $(".zh_bigImg,.maskDiv").fadeOut(function(){
          $(this).remove(); //淡出效果完成后再移除此元素！
         });
       }
     });

　　當(dāng)剛剛將縮略圖的src賦給大圖時(shí)，就來(lái)獲取大圖高度值和寬度值，這樣似乎不妥。結(jié)果卻是這樣，新生成的大圖位置始終在top:50%；left:50%處，F(xiàn)12打開(kāi)調(diào)試窗口發(fā)現(xiàn)margin-top，margin-left都為0，在各大瀏覽器或多或少都會(huì)存在一些問(wèn)題，時(shí)而有效時(shí)而無(wú)效。后來(lái)才發(fā)現(xiàn)，忘了使用load()方法。應(yīng)該讓大圖加載完畢后，再來(lái)獲取高度和寬度值。

改為這樣：

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

　后就正常了。

此外，jquery在處理頁(yè)面動(dòng)態(tài)創(chuàng)建的元素方面，好多地方都需要注意。它不會(huì)響應(yīng)動(dòng)態(tài)創(chuàng)建的元素的事件，只有用live()方法來(lái)綁定事件，才能解決問(wèn)題（直接用原生的js不知道行不行）。比如點(diǎn)擊大圖，應(yīng)該是清除這個(gè)元素。

$(".zhBigImg").click(function(){$(this).remove()}),點(diǎn)擊大圖時(shí)頁(yè)面是不會(huì)有任何響應(yīng)的。改為:$(".zhBigImg").live('click',function(){$(this).remove()})則可以。

總結(jié)

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

您可能感興趣的文章: