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

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

赞 (0)

相关推荐

  • IE8中使用javascript动态加载CSS的解决方法

    众所周知做前端开发的都恨不得踹IE开发者几脚,IE开发者名声之差不低于GFW开发者,昧着良心搞坏市场,人人得而诛之,但是在中国这些地方市场占有率摆在那里,没办法只能向现实低头. 最近我们产品需要在浏览器里动态载入一段CSS,以前的代码是直接用的: 复制代码 代码如下: var bubbleCss = document.createElement('style');bubbleCss.type = 'text/css';bubbleCss.innerHTML = blc_conf.bubbleSt

  • 详谈jQuery.load()和Jsp的include的区别

    1.jqueryObj.load() load()方法通过ajax获取服务端数据,并将放回数据放置到jqueryObj对象下. load(url,data,function(response,status,xhr) 参数 描述 url 规定要将请求发送到哪个 URL. data 可选.规定连同请求发送到服务器的数据. function(response,status,xhr) 可选.规定当请求完成时运行的函数. 额外的参数: response - 包含来自请求的结果数据 status - 包含请

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

    一.jQuery.load() jQuery.load(url,[data],[callback])通过Ajax异步请求加载服务器中的数据,并把数据放到指定元素中. •url :请求服务器的地址 •data :可选项,请求时发送的数据 •callback :可选项,请求成功后的回调函数 例: $(".content").load(" https://www.imooc.com/data/fruit_part.html ") 二.IE8中使用jQuery.load()

  • 解决用jquery load加载页面到div时,不执行页面js的问题

    jquery代码: 复制代码 代码如下: $(function(){$("#test").load("${contextPath}/notepad/toCreate.do");} 加载 ${contextPath}/notepad/toCreate.do 页面到id为test的div中,加载完成之后,create页面中的js不会执行 这种方式没办法实现,换个思路: 复制代码 代码如下: <div id="test">    <i

  • 使用CDN和AJAX加速WordPress中jQuery的加载

    确定要放在Head部分 ? 事实上最好的情况是,js文件都不要在<head>部分进行加载,否则会影响到head部分的载入速度,直接导致网站的内容(body)载入延迟.如果你确定你不需要在head部分载入jQuery,请将载入代码移动到</body>前,准确的说是第一个会用到jQuery函数的javascript代码前. 当然,如果你需要head部分加载jquery,也请确保所有的js文件,包括jquery,都要放在调用CSS文件的代码之后,来实现同步下载.这也是Google官方给出

  • 解决Jquery load()加载GB2312页面时出现乱码的两种方案

    问题描述:jquery的字符集是utf-8,load方法加载完GB2312编码静态页面后,出现中文乱码. a.php 复制代码 代码如下: <script language="javascript" type="text/javascript"> $(function(){ $("#zz").click(function(){ $("#job").load("b.php"); }) }) <

  • JQuery EasyUI 加载两次url的原因分析及解决方案

    1.传统方式 <span style="font-size:18px;">$(function () { var url = "../Source/Query/jhDataQry.ashx?action=query"; $(dg).datagrid({ url: url, queryParams: { qsrq: qsrq, zzrq: zzrq } }); }) <table id="DataGrid" class="

  • python爬虫中PhantomJS加载页面的实例方法

    PhantomJS作为常用获取页面的工具之一,我们已经讲过页面测试.代码评估和捕获屏幕这几种使用的方式.当然最厉害的还是网页方面的捕捉,这里就不再讲述了.今天我们要讲的是它加载页面的新方法,这个可能很多人不知道.其实经常会用到,感兴趣的小伙伴一起进入今天的学习之中吧~ 可以利用 phantom 来实现页面的加载,下面的例子实现了页面的加载并将页面保存为一张图片. var page = require('webpage').create();page.open('http://cuiqingcai

  • 使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

    使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

    一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化 这种布局结构对于单纯的HTML不具备这种嵌入各部分内容的能力,所以就需要我们自己来寻找或者解决这种问题,由于jquery的兼容性和使用广度比较不错,这里 使用jquery的load方法来处理这种页面布局框架. 二.load方法详解 1.定义 $(sele

  • jQuery实现的自动加载页面功能示例

    jQuery实现的自动加载页面功能示例

    本文实例讲述了jQuery实现的自动加载页面功能.分享给大家供大家参考,具体如下: demo.html: <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>---------------</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"

  • jquery加载页面的方法(页面加载完成就执行)

    1.$(function(){ $("#a").click(function(){ //adding your code here }); }); 2.$(document).ready(function(){ $("#a").click(function(){ //adding your code here }); }); 3.window.onload = function(){ $("#a").click(function(){ //add

  • Android中替换WebView加载网页失败时的页面

    Android中替换WebView加载网页失败时的页面

    我们用webView去请求一个网页链接的时候,如果请求网页失败或无网络的情况下,它会返回给我们这样一个页面,如下图所示: 上面这个页面就是系统自带的页面,你觉得是不是很丑?反正小编本人觉得非常丑,很难看,于是乎小编就在想能不能自定义一个页面,当数据请求失败时让系统来加载我们自定义好的页面?上网查了很多资料,都没有关于这个问题的解决方法(反正我是没有找到),经过小编的不断琢磨,今天终于实现了这个功能.以下就是本人自定义实现的数据加载失败时的页面: 这样看起来是不是觉得很高大尚.这和我们真正拿到数据

随机推荐