JQuery - 错误的图像链接加载正确的图像

Question

所以..当在家庭Apache + Php5服务器上测试这一切时，一切都顺利（你们都猜到了）。如果它变得更平滑，我会闻到一些可疑的东西。我做到了。

我将代码上传到了freewebhost（嘿，你做你需要的），以测试是否所有的代码都具有相同的性能。

..“did”。因为#mainRight_PubSpot中显示的图像不是该应用的图像（它是后面的图像，例如它应该显示img1 shows img2）。 此外，如果您注意并仔细阅读它正在加载的图像...不存在。 当文件的名称是fullN.jpg时，它正在加载image/gal/N.jpg。我想添加一些“$（”＃mainRight_PubSpot“）。css（”background-image“，”url（image/loading.gif）“）;”但它似乎并不奏效。

这是我如何获得文件夹（= 2 N 1，，3，N）图像

var obj = jQuery.parseJSON(data); 
//alert(obj) 
    $.each(obj,function(index, value){ 
     //alert(this); 
     var n = index+1; 
     //alert(""+n+" "+index); 
     var nimg = new Image(); 
      $(nimg).load(function() { 
       $(this).hide(); 
       $("#mainLeft_imgHold").append("<imgt imgn="+n+"></imgt>") 
       $("#mainLeft_imgHold").find('imgt:last').append(this); 
       $('imgt').css("background",""); 
       $(this).fadeIn(); 
      }).attr({ 
       src:""+this, 
       imgn:""+n, 
       id:"imgThumb" 
       }); 

图像名称/ SRC（又名此）=图像/加仑/ fullN.jpg *注图像/ thumbN.jpg是完全一样的图片作为/gal/fullN.jpg（连号）

这样做之后，我有那些“活鼠标悬停魔法啄”的原因很明显

if (event.type == 'mouseover') { 
        $("#mainRight_PubSpot").css("background-image","url(image/loading.gif)"); 
        var imgN = $(this).attr("imgn"); 
        var img = new Image(); 
        $(img).load(function(){ 
        $(this).hide(); 
        $("#mainRight_PubSpot").append(this); 
        $(this).fadeIn(); 
        } 
        ).attr({ 
         src:"image/thumb"+imgN+".jpg", 
         width:"249", 
         height:"175", 
         id:"thumBig" 
        }); 
       } 

之一

用于测试porpuse如果你需要其他信息，我会给出链接。 http://nfd.freehostia.com/folio/findex.html

注意：它的工作原理与它应该在家庭服务器上一样。它甚至会将正确的图像与不存在的链接链接起来。 （我知道，很奇怪） 但是，这是在一个活的网络服务器全部混乱

也：该主机是缓慢的。像..海拉慢。 （也就是说，或者我在点击事件中有一个错误，它不会在家庭服务器上复制）知道任何其他free-fasty？

Answer 1

检查你的DOM在Firebug，代替拇指你有大的图像，并在一个大的地方，你有所有的拇指的地方，onlick处理程序你添加到身体没有任何意义的div，也在鼠标悬停你添加拇指#mainRight_PubSpot

的onclick应该是这样的：

var thumb = $('#mainRight_PubSpot').append('<img class="big"/>'). 
    find('.big').load(function() { 
    $(this).fadeIn(); 
}); 

$('imgt').live('click', function(i, item) { 
    thumb.fadeOut().attr('src', 'image/thumb/img' + $(item).attr("imgn") + ".jpg"); 
}); 

而不是IMGT因为IMGT标签不HTML/XHTML存在，您应该使用DIV。

RE ps：如果您现在添加css背景，它应该显示加载图像，因为大图像在加载时隐藏。

[“IMG/thumb01.jpg”，“I​​MG：

你不如果你想创建一个画廊从JSON你应该gallery.php类似返回从gallery.php使用值， /big01.jpg“] ...]

，并在javascript

$(document).ready(function() { 
    $.get('gallery.php', 
      function(data){ 
       $.each($.parseJSON(data),function(index, value){ 
        $('<a href="' + value[1] + '"/>').addClass('thumb'). 
         append('<img src="' + value[0] + '"/>'). 
         appendTo("#mainLeft_imgHold"); 
        /* this could also look like this: 
        $('<a/>').attr('href', value[1]).addClass('thumb'). 
         append('<img src="' + value[0] + '"/>'). 
         appendTo("#mainLeft_imgHold"); 
        */ 
       }); 
      }); 
}); 

$('.thumb').live('click', function() { 
    thumb.attr('src', $(this).attr('href')); 
    return false; 
});