Question

此问题与之前暂时解决问题的帖子有关：Caption text over an image。

我不得不将我的网站移到一个新的服务器上，脚本不再工作了。目的是从我网站上的文件夹中加载随机图像，并在图像上显示相关的配对文本（image1.jpg＆amp; 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.

图片上的标题文字：不再工作了

1 个答案: