僅在調整大小時出現的附加DIV

對於我的投資組合網站，我調用json對象，解析它並動態構建div。所有工作正常，但我附加的div沒有顯示出來。它是空白的。如果我嘗試調整窗口大小，內容會奇蹟般地出現。僅在調整大小時出現的附加DIV

的js是 - >根 - > JS - > Main.js（線65）

$.getJSON('./clients.txt',function(data){ 
    for(var i in data) { 
      var generated = ' 
      <div id="siteRoll"> 
       <div class="thumb"><img src="clients/'+data[i].thumb+'"></div> 
       <div class="info"> 
        <span class="title">'+data[i].name+'</span> 
        <span class="desc">CLIENT : '+data[i].client+'</span> 
        <span class="desc">TYPE : '+data[i].type+'</span> 
        <span class="desc2">'+data[i].desc1+'</span> 
        <span class="desc2">'+data[i].desc2+'</span> 
        <span class="visit"><a href="'+data[i].url+'" target="_blank">Visit site</a></span> 
       </div><!-- info --> 
      </div><!-- siteRoll -->'; 

      $('article#portfolio #sliderPort .swipe-wrap').append(generated); 
    } 
});

任何想法？

來源

2013-09-24 Jagadeesh J

我有一個性能修復的想法 - 不要追加這行逐行，建立生成的變量完整，然後追加到頁面上 - 可能可以節省很多不必要的處理 –

也沒有必要使用多個ID選擇器（＃），因爲ID對於頁面是唯一的，所以'$（'＃sliderPort .swipe-wrap'）'可以自行工作（並且會更快，因爲jQuery不需要通過所有文章找到你要找的東西）; –

你的'.swipe-wrap'在頁面第一次渲染時設置了'width：0px'。這就是導致隱形問題的原因。也許你應該從那裏開始。 – Smuuf

看看這有助於：

$.getJSON('./clients.txt',function(data) { 
var htm = null; 
for(var i in data) { 
     htm += ' 
     <div id="siteRoll"> 
      <div class="thumb"><img src="clients/'+data[i].thumb+'"></div> 
      <div class="info"> 
       <span class="title">'+data[i].name+'</span> 
       <span class="desc">CLIENT : '+data[i].client+'</span> 
       <span class="desc">TYPE : '+data[i].type+'</span> 
       <span class="desc2">'+data[i].desc1+'</span> 
       <span class="desc2">'+data[i].desc2+'</span> 
       <span class="visit"><a href="'+data[i].url+'" target="_blank">Visit site</a></span> 
      </div><!-- info --> 
     </div><!-- siteRoll -->'; 
    } 

    $('article#portfolio #sliderPort .swipe-wrap').html(htm); 
});

來源

2013-09-24 13:15:37

感謝您的建議，不幸的是它的工作:( –

我解決了它與您的解決方案.. :) –

你似乎是構建在頁面加載旋轉木馬，只是在頁面加載後追加其內容。大多數傳送帶（假設它是一個插件）不以這種方式工作 - 在構建內容之前，您需要先呈現內容。

這個特殊的旋轉木馬似乎也反應在window.resize上，所以這就是爲什麼只有當你調整窗口大小和旋轉木馬刷新時纔得到內容的原因。

我想看看刷新（）方法，如果插件支持它，並調用它，一旦你添加在頁面加載的動態數據。

來源

2013-09-24 13:17:13

僅在調整大小時出現的附加DIV

回答

相關問題