一、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. =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()加载页面不显示的原因,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
继续阅读与本文标签相同的文章
我们编写 React 组件的最佳实践
判断iOS、Android以及PC端的示例代码
-
OCP-052考试题库汇总(48)-CUUG内部解答版
2026-05-19栏目: 教程
-
业务系统同城双区部署方案
2026-05-19栏目: 教程
-
RDS_DRDS数据库分配原则
2026-05-19栏目: 教程
-
《21天学通Python(第2版)》| 每日读本书
2026-05-19栏目: 教程
-
ConcurrentHashMap比其他并发集合的安全效率要高一些?
2026-05-19栏目: 教程
