爲什麼圖像不顯示？

我是一個新的web開發和整個HTML，CSS，JS的東西，但我敢說我是一個稱職的程序員，所以我應該至少有一個關於什麼是不工作在我的代碼的想法。但事實並非如此，我正處於一種憤怒的挫折狀態，我不想留在這裏。爲什麼圖像不顯示？

我的目標是創建一個完整的在線課程，以同樣的方式呈現在電源點上：可點擊的對象使事情出現並導致一些其他頁面;並按順序顯示圖像的動畫。

我對轉換到網頁上的以前的「幻燈片」沒有任何問題，但最後一個讓我頭疼。我的頁面主要包含通過<img>標籤包含的圖像，所有這些圖像都具有合適的id和一個或多個class值（class="class1 class2"）。用position: absolute;風格定位，我把它們放在我想要它們的地方。接下來是動畫，這裏是我如何處理它：

當文檔完成加載，這是<body class="contentBody" onload=...>的方法被稱爲：myLocalInit();，它處理使用jQuery功能的動畫。下面是關於它的整個代碼：

function myLocalInit(){ 
     disablePNButtons(); 
     hideAll('.part'); 
     lowerClass('.animar',50); 
     slideUpAll(); 
    } 
function slideUpAll(){ 
     $(".identifica").animate({ 
      top: '-=50px', 
      opacity: '1' 
     }, 400); 
     setTimeout(slideUpRest(),400); 
} 
function slideUpRest(){ 
     $(".identifica").animate({ 
      top: '-=50px', 
      opacity: '1' 
     }, 400, function(){$('#preguntas').animate({ 
      top: '-=50px', 
      opacity: '1' 
     }, 400, function(){ $('#hogar').animate({ 
      top: '-=50px', 
      opacity: '1' 
     }, 400, function(){ $('#negocio').animate({ 
      top: '-=50px', 
      opacity: '1' 
     }, 400, function(){ $('#holabank').animate({ 
      top: '-=50px', 
      opacity: '1' 
     }, 400, function(){ $('#agrobank').animate({ 
      top: '-=50px', 
      opacity: '1' 
     }, 400 function(){ $('#vr').animate({ 
      opacity: '1' 
     }, 400)})})})})})}); 
} 
function hideAll(class1){ 
     $(class1).css('opacity','0'); 
} 

function lowerClass(class1,height){ 
     $(class1).css('top', '+='+height+'px'); 
} 
function disablePNButtons(){ 
     UDUTU_API.gblPreviousButton.btnEnabled(false); 
     UDUTU_API.gblNextButton.btnEnabled(false); 
}

而且<body>看起來像這樣的結尾：<body class="contentBody" onload="myLocalInit();">

然後，當頁面加載沒有內部myLocalInit()生效，這是不可思議的方法。但它變得更加蒼蠅！如果我從myLocalInit()取出方法，並將其放置在onload事件（<body class="contentBody" onload="disablePNButtons();hideAll('.part');lowerClass('.animar',50);slideUpAll();">，他們生效高達slideUpAll()（我通過枯燥alert調試發現了這一點）。

我嚴重不知道什麼是錯的這個主意請問，我求求你們所有的大師們，請賜教我爲什麼這不起作用T_T

來源

2016-07-28 Feillen

一旦事情，肯定不是相關但是：'setTimeout（slideUpRest（），400）;'應該是'setTimeout（slideUpRest，400）;'。現在關於您的問題，您最好提供複製您問題的在線鏈接。順便說一句，控制檯中的任何錯誤？ –

聽說過！將按照未來的建議，但如你所說，它並沒有真正相關:( 現在你說（它沒有考慮檢查控制檯）它說'slideUpAll'沒有定義跆拳道 – Feillen

我很樂意提供鏈接我只知道jsFiddle，但上傳圖像似乎有困難... – Feillen

這可能會解決這個問題，你的問題很難找到確切的解決方案，而沒有調試你的代碼，而只是閱讀你的問題並沒有讓我想到任何明顯的問題，所以我可以提供一些好的做法，解決了這個問題，並使代碼更加可靠。

請把你的函數文檔準備好塊中。

// A $(document).ready() block. 
$(document).ready(function() { 
    console.log("ready!"); 
    // All your functions 

    myLocalInit(); 
});

然後再從頭部移動script標籤結束（在結束</body>標籤內

這使得JavaScript的非阻塞，並且只在DOM準備就緒時加載

接下來你可以做的事情是，也可以在文檔就緒塊的末尾調用myLocalInit();，如上所示，並將其從body.onload中移除。 n一旦DOM被加載。

請讓我知道這些更改是否解決了問題。

來源

2016-07-28 10:24:39

會按照你的建議，非常感謝他們！儘管問題仍然存在，但你們都以這種或那種方式有所幫助^^'（我現在正在發佈解決方案，因爲我找到了原因嘿嘿） – Feillen

很高興知道你發現問題是什麼:)，還要將你的Javascript移出到一個文件中，並將其作爲腳本src包含在內，這是一個好主意。 –

是的，我使用我的不同頁面共享的頻繁且不變的js代碼段，但是有一些代碼行我希望在頁面之間保持易讀性（我將很快離開公司），從而使對於追隨我的可憐的靈魂，容易維護。如果每個頁面的動畫序列都是在所述頁面中定義的，而不是在另一個外部文件中定義的，我會發現更容易。 – Feillen

好吧，猜猜看，我顯然錯過了管理順序動畫的陰險代碼中的逗號,。最後一個回調函數不會從400參數T_T

一整個上午分開僅此一點......非常感謝大家誰幫助我，給了有益的建議:)

來源

2016-07-28 10:32:15 Feillen

爲什麼圖像不顯示？

回答

相關問題