IE8中jQuery.load()加载页面不显示的原因


Posted in jQuery onNovember 15, 2018

一、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()加载页面不显示的原因,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 #jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 #jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 #jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 #jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 #jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 #jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 #jQuery
You might like
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
php向js函数传参的几种方法
2014/08/10 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
Python中获取网页状态码的两个方法
2014/11/03 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
python爬取哈尔滨天气信息
2018/07/14 Python
Python 控制终端输出文字的实例
2019/07/12 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
简单的Python人脸识别系统
2020/07/14 Python
如何一键升级Python所有包
2020/11/05 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
《黄山奇石》教学反思
2014/04/19 职场文书
如何写股份合作协议书
2014/09/11 职场文书
国情备忘录观后感
2015/06/04 职场文书