I am trying to preload some images with a jQuery AJAX call, but am having real problems passing a (url) string into a function within the success function of the AJAX call (if that makes sense).

Here is my code as is stands:

//preloader for images on gallery pages
window.onload = function() {
    setTimeout(function() {     
        var urls = ["./img/party/"]; //just one to get started

        for ( var i = 0; i < urls.length; i++ ) {
            $.ajax({
                url: urls[i],
                success: function(data,url) {
                    $(data).find("a:contains(.jpg)").each(function(url) {                               
                        new Image().src = url + $(this).attr("href");
                    });
                }
            });
        };  
    }, 1000);
};

可以看到我(失败)try 将url传递到.each()调用中,结果是url接受递增整数的值.不知道为什么或者这些与什么有关,也许是jpg文件的数量?

...anyway, it should of course take the single value in my original urls array.

谢谢你的帮助——我似乎总是对这些回电感到有些纠结.


PROGESS?

So, I mucked around a bit, taking heed of comments from @ron tornambe and @PiSquared and am currently here:

//preloader for images on gallery pages
window.onload = function() {
    var urls = ["./img/party/","./img/wedding/","./img/wedding/tree/"];

    setTimeout(function() {
        for ( var i = 0; i < urls.length; i++ ) {
            $.ajax({
                url: urls[i],
                success: function(data) {
                    image_link(data,i);
                    function image_link(data, i) {
                        $(data).find("a:contains(.jpg)").each(function(){ 
                            console.log(i);
                            new Image().src = urls[i] + $(this).attr("href");
                        });
                    }
                }
            });
        };  
    }, 1000);       
};

我试着把image_link(data, i)放在这里、那里和任何地方(在每个嵌套函数中等等),但我得到了相同的结果:i的值只记录为3.我怀疑这是因为对i的所有引用都指向同一个对象,当异步任务实际达到image_link(data, i)时,for...循环就结束了(因此值为3).不用说,这将urls[i]定义为"未定义".

Any (more) tips how I can get round this?

推荐答案

由于settings对象绑定到该ajax调用,因此您可以简单地将indexer添加为自定义属性,然后使用success回调中的this访问该属性:

//preloader for images on gallery pages
window.onload = function() {
    var urls = ["./img/party/","./img/wedding/","./img/wedding/tree/"];

    setTimeout(function() {
        for ( var i = 0; i < urls.length; i++ ) {
            $.ajax({
                url: urls[i],
                indexValue: i,
                success: function(data) {
                    image_link(data , this.indexValue);

                    function image_link(data, i) {
                        $(data).find("a:contains(.jpg)").each(function(){ 
                            console.log(i);
                            new Image().src = urls[i] + $(this).attr("href");
                        });
                    }
                }
            });
        };  
    }, 1000);       
};

Edit: Adding in an updated JSFiddle example, as they seem to have changed how their ECHO endpoints work: https://jsfiddle.net/djujx97n/26/.

要了解其工作原理,请参见ajaxSettings对象:http://api.jquery.com/jquery.ajax/上的"上下文"字段,具体如下:

"The this reference within all callbacks is the object in the context option passed to $.ajax in the settings; if context is not specified, this is a reference to the Ajax settings themselves."

Jquery相关问答推荐

如何根据另一个 radio Select 并切换?

jQuery在localStorage时将类添加到正文

Sheets从多张sheet中导入range匹配数据

如何使用 aria-expanded="true" 更改 CSS 属性

jQuery单击/切换两个功能

在范围内设置文本

在 Javascript 中启用和禁用 Div 及其元素

如何从 jQuery 中的父级中 Select 所有子级(任何级别)?

如何使div全屏?

删除索引后的所有项目

使用 jQuery Select 焦点文本在 Safari 和 Chrome 中不起作用

addClass - 可以在同一个 div 上添加多个类吗?

offsetTop 与 jQuery.offset().top

是否可以在 beforeunload 弹出窗口中显示自定义消息?

Underscore.js 和 jQuery 互补吗?

更改 Eclipse 设置以忽略特定文件上的错误

带有函数的 JavaScript 三元运算符示例

jQuery 使用 AND 和 OR 运算符按属性 Select

为什么我应该创建异步 WebAPI 操作而不是同步操作?

Bootstrap:在 Modal 中打开另一个 Modal