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.load()和Jsp的include的区别
Apr 12 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery实现倒计时功能完整示例
Jun 01 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 VS ASP
2006/10/09 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
checkbox勾选判断代码分析
2014/06/11 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
vue--vuex详解
2019/04/15 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
详解Vite的新体验
2021/02/22 Javascript
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
python利用线程实现多任务
2020/09/18 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
党课学习思想汇报
2014/01/02 职场文书
结婚典礼证婚词
2014/01/08 职场文书
体育馆的标语
2014/06/24 职场文书
一年级小学生评语大全
2014/12/25 职场文书
2016年会开场白台词
2015/06/01 职场文书
如何写新闻稿
2015/07/18 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL
Python简易开发之制作计算器
2022/04/28 Python