当前位置: 移动技术网 > IT编程>开发语言>JavaScript > IE8中jQuery.load()加载页面不显示的原因

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

2018年11月15日  | 移动技术网IT编程  | 我要评论

一、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()加载页面不显示的原因,希望对大家有所帮助

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网