Question

我正在为moodle创建一个silverstripe门户网站;以下代码用于在moodle中使用silverstripe avatar。

为了做到这一点，我创建了一个JQuery脚本来从silverstripe站点（名为users moodle id）中获取图像并替换moodle one，如果它不存在则回退到moodle默认图片。

$(".userpicture").each(function() {
    $(this).attr("src", function(i, origValue){
        $(this).attr( "onerror", "this.onerror=null;this.src=\'" + origValue + "\'");
/*code for generating imgsrc */
        return imgsrc;
    });
});

工作正常，但我只能将其用于一个文件扩展名。因此，在尝试了许多测试有效图像的URL的不同方法后，我能够使用新的图像对象更改我的代码以适用于所有扩展。或者我想。这是我的问题真正发挥作用的地方。

以下代码，无论图像是jpg还是png，它都会测试bmp并返回：

$(".userpicture").each(function() {
    $(this).attr("src", function(i, origValue){
        $(this).attr( "onerror", "this.onerror=null;this.src=\'" + origValue + "\'");
/*code for generating imgsrc */

        var image = new Image();

        image.src = imgsrc + ".jpg";
        if(image.width) {
           return imgsrc + ".jpg";          
        } else {
            image.src = imgsrc + ".png" ;

            if(image.width) {
               return image.src;
            }  else {
               image.src = imgsrc + ".gif" ;
               if(image.width) {
                  return image.src;
               }  else {
                  image.src = imgsrc + ".bmp" ;

                  if(image.width) {
                      return image.src;
                  }
              }
           }
       }
    });
});

为什么会这样？当然，return语句应该结束函数并返回？

我对一个答案的搜索让我得到了很多关于.each（）函数的解释以及它如何在return语句中有独特的规则，起初我认为它解释了它但返回语句并不依赖于。每个（）函数，而不是.attr（）中的函数，所以它不可能是那个。

我对此完全感到困惑。

更令人困惑的是，我通过为每个测试创建一个新的图像对象来创建一个有效的解决方案。这会以某种方式使其在找到有效图像后停止并且不继续测试。

var image = new Image();
image.src = imgsrc + ".jpg";
    if(image.width) {
        return imgsrc + ".jpg";
    } else {
        var image2 = new Image();
        image2.src = imgsrc + ".png" ;

        if(image2.width) {
            return image2.src;
        }  else {
            var image3 = new Image();
            image3.src = imgsrc + ".gif" ;

            if(image3.width) {
                return image3.src;
            }  else {
                var image4 = new Image();
                image4.src = imgsrc + ".bmp" ;

                if(image4.width) {
                    return image4.src;  
                }

但又是为什么呢？它与图像对象有关吗？即使是这种情况，原始代码中的return语句应该仍然有用吗？

修改

感谢Felix Kling和charlietft的评论，我了解到这是因为请求是异步的，并且在加载图像之前完成。而第二个代码只是因为图像的缓存而显得有效。

EDIT2：

了解为什么这不可能我重新评估了我想要的东西，并改变了我的想法并提出了这个有效的解决方案：

 var startExt = "jpg";
$(".userpicture").each(function() {


    changeImage($(this),startExt);

 });

 function changeImage(item, ext){
        $(item).attr("src", function() {

        if( ext === "jpg") {
            item.attr( "onerror", "changeImage( $(this), \'png\')");
        } else if( ext === "png") {
            item.attr( "onerror", "changeImage( $(this), \'gif\')");
        } else if( ext === "gif") {
            item.attr( "onerror", "changeImage( $(this), \'bmp\')");
        } 

        /*  Code to create img url */

        return imgurl + "." + ext;

        });
    }

正如您所看到的，每当扩展失败时，我选择了递归调用onrorror，而不是测试有效URL的所有扩展。仍然不是百分之百满意，但它比它更好，我觉得我学到了更多关于JQuery的知识。

为什么JQuery会以原样回归？

0 个答案: