我的尝试： - ）

Question

我有一个我为Tumblr设计的脚本，它修改了内嵌图像中的部分img src（在文本/标题/等帖子中，不是照片/ photoset帖子）以显示更大，因为默认网址已加载到Tumblr强迫它们为500px或更低，并且许多图像通常更大并且可以被拉伸以填充它们的容器。但是，有时大图像的网址并不总是可用，我想知道是否有办法取消该特定图像上的脚本，如果更改网址会破坏它。这就是我所拥有的，但它在页面上闪烁：

$( window ).on( "load", function(){
$('.tmblr-full img').each(function(){
    var $this = $(this)
        $this.attr('src',$this.attr('src').replace('_500.','_540.'))
    if ($(this).width() >= 500) {
        $(this).css({'width' : 'auto', 'height' : 'auto'});
    }
})

$('.tmblr-full img').error(function(){
    var $this = $(this)
        $this.attr('src',$this.attr('src').replace('_540.','_500.'))
})

});

Here is a JSFiddle包含原始代码（不包括我添加的错误功能），因此您可以看到问题。

谢谢！

Answer 1

对于我的方法，我使用ajax检查新图像URL是否有效（不返回任何错误代码），只有在ajax调用成功时才更改URL。

$(".tmblr-full img").each(function(){ // for every img inside a .tmblr-full

  var img = $(this), // define the target image
  newSrc = img.attr("src").replace("_500.","_540."); // the image source to check

  $.ajax({ // run an ajax check on the new image source
    url:newSrc,
    success: function(){ // if the image is found
      img.attr("src",newSrc); // replace the old url with the new one
    }
  });

});

（小提琴：https://jsfiddle.net/48hpeo9z/7/）

但是因为Tumblr包含带有<figure>标签的图像的原始宽度，您还可以使用它来检查是否存在更大版本的图像。

Answer 2

您正在将字符串中的URL修改为其他字符串 - 系统如何知道第二个字符串是否会导致错误？

您可以做的是重新定义onload and onerror handlers of that particular image, as in this example，以及将之前的网址值保存到该img的属性中。然后，如果错误条件触发，则清除onload和onerror并重新设置先前的src值。

我的尝试： - ）

我目前无法尝试，但在这里：

$('.tmblr-full img').each(function(){
    var $img = $(this);
    var img  = $img[0];

    // Save the original src
    $img.attr('orig-src', $img.attr('src'));

    img.onerror = function() {
        var $img = $(this);
        var orig = $img.attr('orig-src');
        $img.attr('orig-src', null);
        $img.attr('src', orig);
    };
    img.onload = function() {
        var $img = $(this);
        if ($img.width() >= 500) {
            $img.css({'width' : 'auto', 'height' : 'auto'});
        }
    }
    // Now try loading.
    // If I remember correctly this will either fire onload
    // or onerror.
    img.attr('src', $this.attr('src').replace('_500.','_540.'));
})

如何修改img src，除非结果破坏了图片网址

2 个答案:

我的尝试： - ）