jQuery的執行不是在PGAE的第一負載完全工作，但工作後刷新頁面

-5

我有一個jQuery代碼的一個ajax call其更換一些HTML的done功能後exicute屬性值jQuery的執行不是在PGAE的第一負載完全工作，但工作後刷新頁面

<div class="0-div" data-thumb="11.jpeg"> 
    <a class="0-a" href="test.html" ><img class="0-img" src="11.jpeg" /></a> 
</div> 

<div class="0-div" data-thumb="21.jpeg"> 
    <a class="0-a" href="test1.html" ><img class="0-img" src="21.jpeg" /></a> 
</div> 

<div class="0-div" data-thumb="tes.jpeg"> 
    <a class="0-a" href="test.html" ><img class="0-img" src="tes.jpeg" /></a> 
</div> 

<div class="0-div" data-thumb="zoo.jpeg"> 
    <a class="0-a" href="test.html" ><img class="0-img" src="zoo.jpeg" /></a> 
</div> 


<script> 
    $.ajax({..Ajax code.}).done(function(msg){ 
    for (i = 0; i < 3; i++) { 

         $("."+i+"-div").attr('data-thumb', "pa.jpg"); 
         $("."+i+"-a").attr('href', "new.html"); 
         $("."+i+"-img").attr('src', "sa.jpg"); 
        } }); 
</script>

其實這個代碼正在工作，但速度很慢。

例如，如果我第一次加載頁面data-thumb & href被正確替換，但img src未被更改。

但是，當我刷新頁面然後img src也改變。

如何解決這個問題？

注：我發現了同樣的情況在 jQuery script not executing on initial page load 。但在這裏我不知道如何應用這個。

請大家幫忙。

來源

2017-05-08 abilash er

提供實際的代碼示例更準確地理解它 – ScanQR

如果您想提高性能，請不要使用jQuery。它已經很好地記錄了改變DOM元素的速度有多慢。 –

*「例如，如果iake頁面」*「iake」不是英語動詞。我無法開始猜測你的意思。在尋求幫助時，至少要禮貌地閱讀你寫的內容（畢竟，預覽區域位於文本框和「發佈你的問題」按鈕之間），以確保它清晰並具有所有必要條件信息。 –

你可能不需要jQuery。分配和使用#id的元素，而不是.class：

<div id="0-div">...</div>

標識被設計成獨特和性能要好得多。

for(var i = 0; i < 3; i++){ 
    var url = image_array[i]; 
    var thumb = document.getElementById(i + "-div"); 
     thumb.setAttribute("data-thumb", url); 
    var link = document.getElementById(i + "-a"); 
     link.href = url; 
    var image = document.getElementById(i + "-img"); 
     image.src = url; 
}

變化：

刪除不必要的jQuery庫使用。我更喜歡使用原生Javascript解決方案。畢竟，熟悉JS的每個人都可以理解這段代碼，但並不都知道自定義庫。而且，這些還會增加你的頁面性能。
你得到image_array[i]三次。最好分配一次並重新使用。
你分配什麼變量具有獨特的名字，如url，image很顯然，等
切換到getElementById，而不是jQuery的查詢選擇。這可能會提高性能，因爲您不需要解析查詢，並且id是唯一的。

建議：

如果不能用完全相同的參數另一個HTML元素，使用#id。請注意，您可以使用.class以及#id：<div class="thumbnail" id="thumbail-0">。
正如您在先前的建議中所看到的，使用更有意義的標識符。<div id="0-div">和<div class="thumbnail" id="thumbnail-0">之間有很大差異。
使用包裝。包裹在一個div的內容，而不是在DOM隨機散射他們：

佈局的做法：

<!-- Bad --> 
<div id="0-div"> 
<div id="0-a"> 
<div id="0-b"> 
<div id="1-d"> 

<!-- Good --> 
<div class="product" id="product-0"> 
    <div class="thumbnail" id="thumbnail-0">...</div> 
    <a class="link" id="link-0" href>...</a> 
    <img class="preview" id="image-0" src> 
</div>

這樣你就可以很容易地設置樣式：

.product { /* Style the container */ } 
.product .thumbnail { /* Style the thumbnail */ } 
.product .link { /* Style the link */ }

來源

2017-05-08 13:07:24

我會檢查這個 –

jQuery的執行不是在PGAE的第一負載完全工作，但工作後刷新頁面

回答

相關問題