图片上的标题文字：不再起作用

Question

This question is related to a previous post where the problem was temporarily solved: Caption text over an image .

I had to move my website to a new server where the script doesn't work anymore. The purpose is to load a random image from a folder on my website and to display over the image a related paired text (image1.jpg & text1.txt).

After the migration of the site, nor the images or the text would display. I could get the image displayed again by changing this line of code:

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

->

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

This has fixed the problem of the images but the attached text is still not displayed.

The updated JSfiddle is there: 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;
}

I don't understand why moving the website has generated this issue. Any help would be very much appreciated...

Answer 1

That's because the speed of the connection to the server changed - it got slower.

AJAX request are asynchronous. What happens is that you send the request, read the result and then the response from the server comes in. Use this code instead:

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 will prepare everything to call the success callback when the server response comes in. See http://learn.jquery.com/ajax/

And you should use $( document ).ready(); instead of window.onload Note: For this to work, the document must be served from www.lvts.fr as well or you'll get this error:

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.