Question

我在开始调用主图像时有以下代码：

$(function () {
   var img = new Image();
   $(img).load(function () {
       //$(this).fadeOut('normal');
       $('#bg div table tr td').removeClass('loading').append(this);
       $(this).fadeIn();
   }).attr('src', 'images/home.jpg');
});

到目前为止工作。点击一个链接，我想淡出那个，然后在那里加载第二个。不知怎的，我不能让它工作......有很多图像必须通过点击导航中的元素加载，我不是关于代码的shure。有什么想法吗？

Answer 1

如果我理解正确，你可以尝试这样的事情：

function ShowImage(src){
   var $imageContainer = $('#bg div table tr td');
   $imageContainer.empty().addClass('loading');
   var $image = $("<img src='" + src + "'/>");
   $image.load(function(){
      $imageContainer.removeClass('loading').append(this);
   });
}

然后调用此函数显示每个新图像。

Answer 2

这可能是一种更清晰的方法（坚持使用jQuery）

$(function() {
    var $img = $('<img>', {
        src:    'images/home.jpg',
        load:   function() {
            $('#bg div table tr td').removeClass('loading').append(this);
            $(this).fadeIn('slow');
        },
        css: {
            display:  'none'
        }    
    }).appendTo(document.body /* append wherever you need it */);

    $('a').bind('click', function() {
         $img.fadeOut('slow', function() {
            $img.attr('src', '/images/newimage.jpg');
         });
    });
});

演示：http://www.jsfiddle.net/AJcXd/

jQuery加载图像并通过单击交换

2 个答案: