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和ajax代替iframe的方法(详解)
Apr 12 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 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 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
python删除本地夹里重复文件的方法
2020/11/19 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
python的数学算法函数及公式用法
2020/11/18 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
共青团员自我评价
2015/03/10 职场文书
中秋节寄语2015
2015/03/24 职场文书
环保主题班会教案
2015/08/13 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python
Nginx限流和黑名单配置
2022/05/20 Servers
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL