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()加载页面不显示的原因，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家介绍了一文详解GoJs中go.Panel的itemArray属性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要为大家详细介绍了微信小程序计算器实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
JS typeof fn === ''function'' && fn()详解
最近在学习js的时候发现很多人都喜欢在JS 中存在fn && fn() 执行语句或者typeof fn === 'function' && fn()，下面这篇文章就为大家分享一下2020-08-08
在 JavaScript 中，可以使用 substr()、slice() 和 substring() 方法截取字符串。这篇文章就来通过一些示例和大家聊聊这些方法的具体操作，需要的可以参考一下2023-02-02
JavaScript中blob对象和file对象的区别及相互转换实例
在JavaScript中,File和Blob是Web API提供的两个重要对象,用于处理文件和二进制数据,这篇文章主要介绍了JavaScript中blob对象和file对象的区别及相互转换的相关资料,需要的朋友可以参考下2025-04-04
在JavaScript中,将年月日转换为时间戳可以通过多种方式实现,下面给大家分享JS把年月日转为时间戳的操作方法,感兴趣的朋友跟随小编一起看看吧2024-08-08
这篇文章主要为大家介绍了JavaScript BOM，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
JavaScript改变this指向的四种方法(bind、call、apply 和箭头函数)
JavaScript中的this是一个非常重要且容易困惑的概念,主要用于引用执行上下文,然而,this的指向经常因为不同的执行环境而改变,为了解决这个问题,JavaScript提供了多种方法来明确指定this的指向,本文将详细介绍JavaScript中常用的四种改变this指向的方法2025-03-03
这篇文章主要为大家详细介绍了javascript实现简易的计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01![js为什么[]==![]是成立的吗](//img.jbzj.com/images/xgimg/bcimg9.png)
本文主要介绍了js为什么[]==![]是成立的吗，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
![js为什么[]==![]是成立的吗](http://img.jbzj.com/images/xgimg/bcimg9.png)
最新评论