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()加载页面不显示的原因，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本文主要通过几个实例对js中作用域进行详细解析，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
JavaScript实现将xml转换成html table表格的方法
这篇文章主要介绍了JavaScript实现将xml转换成html table表格的方法,实例分析了javascript操作XML文件与table表格的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要为大家详细介绍了JavaScript+canvas实现框内跳动小球，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要给大家介绍了关于vscode+gulp轻松开发小程序的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。本文给大家介绍ie8 不支持 indexof 的解决方法2016-03-03
JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一,那么如何在JS中实现继承呢?下面这篇文章主要给大家介绍了关于JS中六种继承方式以及优缺点的相关资料,需要的朋友可以参考下2021-10-10
这篇文章主要为大家详细介绍了js实现简单抽奖小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
下面小编就为大家带来一篇禁用backspace网页回退功能的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要向大家介绍了js父页面中使用子页面的方法，即js父页面使用iframe中的函数，感兴趣的朋友可以参考一下2016-01-01
JavaScript中Array.from()的超全用法详解
Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map），别忘记就来讲讲他的具体用法吧2023-03-03
最新评论