javascript - 图像上的标题文本 : not working anymore

Question

此问题与之前的帖子相关，临时解决了问题:Caption text over an image .

我不得不将我的网站移动到脚本不再工作的新服务器上。目的是从我网站上的文件夹加载随机图像，并在图像上显示相关的成对文本(image1.jpg 和 text1.txt)。

站点迁移后，图片和文字都不会显示。通过更改这行代码，我可以再次显示图像:

xmlhttp.open("GET", caption, false);

->

xmlhttp.open("GET", caption, true);

这已经解决了图片的问题，但是附加的文本仍然没有显示。

更新的 JSfiddle 在那里:http://jsfiddle.net/Totoleheros/ES22a/7/ .

html:

<img class="fullSize" onload="fixImage(this)" />
<div class="HOLDER">
    <div class="theCaption"></div>
    <img id="showImage" alt="random image" />
</div>

JavaScript:

function fixImage( image )
{
    // change calculations to match your needs
    var show = document.getElementById("showImage");
    if ( image.height > image.width )
    {
        show.style.height = "331px";
        show.style.width = Math.round( (image.width / image.height) * 331 ) + "px";
    } else {
        show.style.width = "200px";
        show.style.height = Math.round( (image.height / image.width) * 200 ) + "px";
    }



    show.src = image.src;
    show.style.visibility = "visible";
}

var MAXPICTURENUMBER = 166; // or whatever you choose
var rn = 1 + Math.floor( MAXPICTURENUMBER * Math.random() );
var url ="http://www.lvts.fr/Images/RandomPictures/" + rn + ".jpg";
var caption ="http://www.lvts.fr/Images/RandomPictures/" + rn + ".txt";

var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", caption, true);
xmlhttp.send();

window.onload = function() {    jq('.theCaption').html(xmlhttp.responseText); jq('.fullSize').prop('src',url); };

$mirage(document).ready(function(){
    $mirage('body').unbind('mouseenter');
    var mirageMenuConfig = { sensitivity: 3, interval: 30, over: revealMainMenuChildren, timeout: 500, out: hideMainMenuChildren };
    function revealMainMenuChildren(){  $mirage(this).children("ul").css('opacity','1').slideDown(300); }
    function hideMainMenuChildren(){     $mirage(this).children("ul").fadeTo(300, 0).slideUp(300); }    
    $mirage("#nav ul ul").parent().addClass("ddarrow");
    $mirage("#nav ul ul").parent().append("<span></span>");
    $mirage("#nav ul ul").css({ display: "none" }); 
    $mirage("#nav ul li").hoverIntent(mirageMenuConfig);
});

CSS:

#showImage {
     display: block;
    height: 331px; width: 200px; 
    visibility: hidden; 
    z-index: 1;
}

.HOLDER { 
    position: relative;
    width:200px;
    margin:0 auto;
}

.theCaption {
    position: absolute; 

    width: 196px; height: 40px; 
    background-color: #eeeeee; color: #000000;
    overflow: hidden;
    font-family: arial; font-weight: normal;
        filter:alpha(opacity=80);
        -moz-opacity:0.8;
        -khtml-opacity: 0.8;
        opacity: 0.8;
    z-index: 2;
font-size: 10px;
line-height: 0.9em;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
    display: none;
}

.HOLDER:hover .theCaption {display:block;}

.fullSize {
    position: absolute; 
    top: 0px; left: 0px; 
    visibility: hidden;
}

我不明白为什么移动网站会产生这个问题。任何帮助将不胜感激......

Answer 1

那是因为与服务器的连接速度发生了变化——变慢了。

AJAX 请求是异步的。发生的事情是您发送请求，读取结果，然后来自服务器的响应进来。请改用此代码:

var caption ="http://www.lvts.fr/Images/RandomPictures/" + rn + ".txt";

$( document ).ready(function() {
    $.ajax(caption, {
        dataType: 'html',
        success: function(data, textStatus, jqXHR) {
            console.log('data', data);
            $('.theCaption').html(data);
        }
    });

    $('.fullSize').prop('src',url);
});

jQuery 将准备好一切以在服务器响应到达时调用 success 回调。参见 http://learn.jquery.com/ajax/

你应该使用 $( document ).ready();而不是 window.onload注意:要使其正常工作，还必须从 www.lvts.fr 提供文档，否则您将收到此错误:

XMLHttpRequest cannot load http://www.lvts.fr/Images/RandomPictures/79.txt. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.