标签: jquery-load

我想要做:

$("img").bind('load', function() {
  // do stuff
});

但是从缓存加载图像时不会触发加载事件.jQuery文档提出了一个修复此问题的插件,但它不起作用

我想使用jQuery异步加载我的页面上的外部图像,我尝试了以下内容:

$.ajax({ 
   url: "http://somedomain.com/image.jpg", 
   timeout:5000,
   success: function() {

   },
   error: function(r,x) {

   }
});

但它总是返回错误,甚至可以像这样加载图像？

我尝试使用.load方法并且它可以工作,但我不知道如果图像不可用我怎么能设置超时(404).我怎样才能做到这一点？

这个例子

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<div id="test"></div>
<script>
$(document).ready(() => {
  $('#test').load('doesntmatter');
});
</script>

在我看来,它与ajax加载函数的示例完全相同.正如代码片段可以告诉你的那样,它实际上是错误的

Uncaught TypeError: $(...).load is not a function

我究竟做错了什么？

当load()在5秒内没有返回时,我想取消.load()操作.如果是这样,我会显示错误消息,例如'抱歉,没有图片加载'.

我拥有的是......

...超时处理:

jQuery.fn.idle = function(time, postFunction){  
    var i = $(this);  
    i.queue(function(){  
        setTimeout(function(){  
            i.dequeue();
            postFunction();  
        }, time);  
    });
    return $(this); 
};

...初始化错误消息超时:

var hasImage = false;

$('#errorMessage')
    .idle(5000, function() {

        if(!hasImage) {
            // 1. cancel .load()            
            // 2. show error message
        }
    });

...图像加载:

$('#myImage')
     .attr('src', '/url/anypath/image.png')
     .load(function(){
         hasImage = true;
         // do something...
      });

我唯一想知道的是如何取消正在运行的load()(如果可能的话).

编辑:

另一种方法:如何阻止.load()方法在返回时调用它的回调函数？

我仍然试图绕过我的脑袋deferred而不是,所以考虑到这一点,我有一个关于如何做以下事情的问题.

我的团队和我有3个单独的.load()方法,每个方法都抓住一个特定的模板并将其附加到同一个容器中.每个负载都会花费不同的时间,因此当内容加载时,它会以"阶梯式"方式加载(1,然后是2,然后是3).我想利用deferred物体并等到它们全部完成,然后同时附加它们以移除"阶梯"动作.

$('<div>').load(baseInfoTemplate, function () {
    var baseData = {
        // build some object
    };

    $.tmpl(this, baseData).appendTo($generalContainer);
});

所有三个电话都与上面的电话类似.

我怎样才能做到这一点？

我有一个WordPress安装,我正在尝试使用jQuery创建一个Load More效果.我在使用页面片段的基本.load功能时遇到了一些麻烦.我不介意使用.get,因为我在这里看到一些线程,认为这是一个更好的解决方案.

这是我的页面URL结构和内容:

第一页: http://example.com/page/1/

HTML:

<div id="articles">
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
</div>

第二页: http://example.com/page/2/

HTML:

<div id="articles">
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
</div>

我在页面底部有一个链接,我尝试过以下操作:

jQuery(#articles).load('http://example.com/page/2/ #articles');

可悲的是,有两个问题.首先,.load函数#articles div从第二页抓取它的内容并将其放入现有的内容中#articles div.这意味着,即使这是有效的,每次点击都会产生div内的递归div.这太乱了.

是否有人可以帮助我将命令.story classes从第二页添加到#articles div第一页上？我可以用WordPress之后的变量,循环和PHP来计算自动化的后勤.只需要适当的jQuery脚本一些帮助.

PS Bonus问题:如果有人知道jQuery .load/.get是否会损害浏览量,这对于那些有广告收入的人来说非常重要,请告诉我们!如果每个.load/.get都算作Google Analytics的另一个点击,我们就会很好!

谢谢!

我正在尝试执行以下操作:

在链接点击:

1.)淡出一个img

2.)更改现在隐藏图像的src

3.)当新的src的img完成加载时,淡入

最低限度,我希望看到一个图像的平滑淡出和另一个图像的淡入淡出(通过更改src在相同的img标记内)

最终我想:

1.)淡出一个img

2.)显示动画gif"加载图像"

3.)更改现在隐藏图像的src

4.)隐藏GIF动画"加载图片"

5.)当新的src的img完成加载时,淡入

谢谢.

这是我到目前为止所尝试的.似乎只有在src改变之后(淡出之前)才会闪烁几次.奇怪的行为.

$("#Image").fadeOut();
$("#Image").attr("src", NEW_IMAGE_SRC);
$("#Image").fadeIn();

#Image 是一个IMG标签

我正在尝试通过插入URL来使用JavaScript获取整个网页.但是,该网站构建为单页面应用程序(SPA),它使用JavaScript/backbone.js在呈现初始响应后动态加载其大部分内容.

例如,当我路由到以下地址时:

https://connect.garmin.com/modern/activity/1915361012

然后将其输入控制台(页面加载后):

var $page = $("html")
console.log("%c?: ", "color:green;", $page.find(".inline-edit-target.page-title-overflow").text().trim());
console.log("%c?: ", "color:green;", $page.find("footer .details").text().trim());

然后我将获得动态加载的活动标题以及静态加载的页脚:

然而,当我尝试通过一个AJAX调用与任何载入网页,$.get()或.load(),我只得到交付的初始响应(一样的内容时,在查看源代码):

view-source:https://connect.garmin.com/modern/activity/1915361012

因此,如果我使用以下任一AJAX调用:

// jQuery.get()
var url = "https://connect.garmin.com/modern/activity/1915361012";
jQuery.get(url,function(data) {
    var $page = $("<div>").html(data)
    console.log("%c?: ", "color:red;",   $page.find(".page-title").text().trim());
    console.log("%c?: ", "color:green;", $page.find("footer .details").text().trim());
});

// jQuery.load()
var url = "https://connect.garmin.com/modern/activity/1915361012";
var $page = $("<div>")
$page.load(url, function(data) {
    console.log("%c?: ", "color:red;",   $page.find(".page-title").text().trim()    );
    console.log("%c?: ", "color:green;", $page.find("footer .details").text().trim());
});

我仍然会获得最初的页脚,但不会获得任何其他页面内容:

我试着解决方案在这里,以eval() …

我想<div>在jQuery UI模式对话框的结束时刷新一个.

我的代码是:

var dialog = jQuery('#divPopup').dialog({
    autoOpen: false,
    height: 450,
    width: 650,
    modal: true,
    open: function(event, ui) {
        jQuery('body').css('overflow', 'hidden');
    },
    close: function(event, ui) {
        jQuery('#divPopup').dialog('destroy').remove();
        jQuery("#bodyId").load("http://www.xyz.com/ #bodyId");
    }
});

但不是替换它,而是<div>在旧的内部添加新内容<div>:

<div id="bodyId">
    <div id="bodyId">
        New Response
    </div>
</div>

我想bodyId用新的div 替换旧的div bodyId.

.load()给我带来麻烦.我正在处理一个节段加载器项目,我似乎无法获取我需要的文件.

我想要实现的目标: #sectionContainer在文档加载时是空的,但在文档就绪时它被"填充"了Pages1.html.这是通过JavaScript文件完成的sections.js.JS文件和index.html不在同一个文件夹中.这是网站结构(我在我的网站上运行了很多项目)

• 主文件夹
  • 项目1
  • 项目2(sectionLoaderTest /)
    • 的index.html
    • Pages1.html
    • Pages2.html
    • CSS /
    • JS /
      • sections.js
  • 项目3
  • ...

我用来加载Pages1.html的代码:

$(document).ready(function () {
    $("#sectionContainer").load("../Pages1.html", function (response, status, xhr) {
        if (status == "error") {
            var msg = "An error occurred. Status code: ";
            $("#error").html(msg + xhr.status + ". Status text: " + xhr.statusText);
        }
    });
});

我已经尝试了我所知道的所有可能的方法(/,.,.,..,...),似乎没有任何工作.这是测试用例.

有谁知道我做错了什么？