jQuery加载带有完整回调的图像

Question

我看到 a comment on Ben Nadel's blog Stephen Rushing 发布了一个加载器，但我不知道如何传递选择器和参数...

我想我还需要completeCallback 和errorCallback 函数？

function imgLoad(img, completeCallback, errorCallback) {
    if (img != null && completeCallback != null) {
        var loadWatch = setInterval(watch, 500);
        function watch() {
            if (img.complete) {
                clearInterval(loadWatch);
                completeCallback(img);
            }
        }
    } else {
        if (typeof errorCallback == "function") errorCallback();
    }
}
// then call this from anywhere
imgLoad($("img.selector")[0], function(img) {
    $(img).fadeIn();
});

HTML：

<a href="#" class="tnClick" ><img id="myImage" src="images/001.jpg" /></a>

JS：

$(document).ready(function() {
    var newImage = "images/002.jpg";
    $("#myImage").css("display","none");
    $("a.tnClick").click(function() {
        // imgLoad here
    });
})

Answer 1

我想要这个功能，并且绝对不想在页面呈现时加载所有图像。我的图片在 Amazon s3 上，并且有一个很大的相册，这将是很多不必要的请求。我创建了一个快速的 jQuery 插件来处理它here:

$("#image-1").loadImage('/path/to/new/image.jpg',function(){  
  $(this).css({height:'120px'});//alter the css styling after the image has loaded
});

所以基本上，每当用户点击代表一组图片的缩略图时，我都会在那个时间点加载其他图片。回调允许我在图像加载后更改 css。

Answer 2

试试这个？

doShow = function() {
  if ($('#img_id').attr('complete')) {
    alert('Image is loaded!');
  } else {
    window.setTimeout('doShow()', 100);
  }
};

$('#img_id').attr('src', 'image.jpg');
doShow();

似乎上面的方法无处不在......

Answer 3

在对图像使用加载事件时需要小心，因为如果在浏览器的缓存 IE 中找到图像并且（我被告知）Chrome 不会按预期触发该事件。

由于我不得不自己面对这个问题，我通过检查 DOM 属性完成解决（据说在大多数主流浏览器中都可以使用）：如果等于 true，我只是解除了之前绑定的 'load' 事件的绑定。见例子：

$("#myimage").attr("src","http://www.mysite.com/myimage.jpg").load(doSomething);

if ($("#myimage").get(0).complete) {

    // already in cache?
            $("#myimage").unbind("load");
            doSomething();


}

希望对你有帮助

Answer 4

如果你想让它在显示之前加载，你可以把它剪掉很多，像这样：

$(document).ready(function() {
    var newImage = "images/002.jpg"; //Image name

    $("a.tnClick").click(function() {
      $("#myImage").hide() //Hide it
        .one('load', function() { //Set something to run when it finishes loading
          $(this).fadeIn(); //Fade it in when loaded
        })
        .attr('src', newImage) //Set the source so it begins fetching
        .each(function() {
          //Cache fix for browsers that don't trigger .load()
          if(this.complete) $(this).trigger('load');
        });
    });
});

.one() 调用确保 .load() 只触发一次，因此不会出现重复的淡入。最后的 .each() 是因为某些浏览器不会为从缓存中获取的图像触发 load 事件，这也是您发布的示例中的轮询尝试做的事情。