如何顯示來自JSON源的滑塊圖片？

我有一個JSON文件，其中包含圖片的地址，我使用JSON來連接到JSON文件，並且我使用一個名爲「lightslider」的插件來顯示圖片，我的問題是當我運行HTML註釋節目但在刷新它顯示的頁面之後。和其他問題是隻有在狐狸工作。也在服務器上不能在服務器上工作。請給我一些簡單而可能的方法，以便從JSON文件中顯示我的圖片在所有瀏覽器上工作。謝謝。如何顯示來自JSON源的滑塊圖片？

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>link3</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="lightslider.css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="lightslider.js"></script> 
    <script> 
     $(document).ready(function() { 
      $('#image-gallery').lightSlider({ 
       item:1, 
       speed:500, 
       auto:true, 
       loop:true, 
       pause: 3000, 
       pauseOnHover:true, 
       thumbItem:9, 
       slideMargin: 0, 
       autoWidth:true, 
       onSliderLoad: function() { 
        $('#image-gallery').removeClass('cS-hidden'); 
       } 
      }); 
     }); 
    </script> 
    <script> 
    $(document).ready(function(){ 

    $.getJSON('slides.json', function(data) { 
    $("h2").html(data[0].title); 
      $.each(data, function (i, f) { 
       if(i>0){ 
        $("#image-gallery").append("<li><img src=" + f.content + "/></li>"); 
       } 
      }); 
     }); 
    }); 
    </script> 
</head> 
    <body> 
     <h2 style="text-align: center; font-weight: bolder;"> 
     </h2> 
     <div class="clearfix container" style="max-width:900px;" > 
      <ul id="image-gallery" class="gallery list-unstyled cS-hidden"> 
      </ul> 
     </div> 
    </body> 
</html>

來源

2017-04-01 Alex

關於JavaScript的只是刷新嘗試後的工作來包裝你的代碼window.onload = function(){}您的問題，讓你的代碼是DOM後加載是滿載。

來源

2017-04-01 18:59:16 Mohammed

其實我正在尋找一些更好的方式來顯示我的圖像在JSON到html。你有一個想法或任何建議的插件 – Alex

您是否在雙擊諸如'file：/// Users /../ index.html'之類的html文件或在Web服務器上測試您的解決方案？在Chrome上檢查您的Web控制檯並查看是否有任何錯誤並更新您的問題（如果有）。 – Mohammed

如何顯示來自JSON源的滑塊圖片？

回答

相關問題