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实现文章图片弹出放大效果
Apr 06 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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 include_path设置技巧分享
2011/07/03 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
JS的反射问题
2010/04/07 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
python调用staf自动化框架的方法
2018/12/26 Python
PyTorch基本数据类型(一)
2019/05/22 Python
Python何时应该使用Lambda函数
2019/07/02 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
如何基于线程池提升request模块效率
2020/04/18 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
12岁生日感言
2014/01/21 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
假释思想汇报范文
2014/10/11 职场文书
九不准学习心得体会
2016/01/23 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server