在頁面加載時激活jQuery img和文本操作

Question

我已經構建了一個小引導程序3縮略圖文本和img操作，現在我有一個關於如何使頁面加載時處於活動狀態的問題，具體我希望#anime1處於活動狀態當頁面加載時。

看看這個manipulation的例子。您會看到我有一堆縮略圖只是在那裏顯示，但是當您與操作交互時，它會顯示您需要查看的所有標題的所有內容。

那麼我怎樣才能使這個頁面加載活躍？

$(function(){ 
    $('#anime1').click(function(){ 

     $('.column').each(function(){ 
      $(this).hide(500); 
     }); 
     $('.columns').each(function(){ 
      $(this).show(500); 

     $('#col1 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col1 h3').text('Grouting!'); 
     $('#col1 p:first').text('Grouting retention text will be displayed here!'); 

     $('#col2 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col2 h3').text('Grouting!'); 
     $('#col2 p:first').text('Grouting retention text will be displayed here!'); 

     $('#col3 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col3 h3').text('Grouting!'); 
     $('#col3 p:first').text('Grouting retention text will be displayed here!'); 

     $('#col4 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col4 h3').text('Grouting!'); 
     $('#col4 p:first').text('Grouting retention text will be displayed here!'); 

     $('#col5 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col5 h3').text('Grouting!'); 
     $('#col5 p:first').text('Grouting retention text will be displayed here!'); 

     $('#col6 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col6 h3').text('Grouting!'); 
     $('#col6 p:first').text('Grouting retention text will be displayed here!'); 
     }); 
    }); 

    $('#anime2').click(function(){ 
     $('.columns').hide(500); 
     $('.column').hide(500); 
    }); 
    $('#anime2').click(function(){ 
     $('.col4').show(500); 

     $('#col4 img').attr('src', 'img/lazy0.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col4 h3').text('Ground Improvements!'); 
     $('#col4 p:first').text('Ground Improvements text will be displayed here!'); 
    }); 

    $('#anime3').click(function(){ 
     $('.column').each(function(){ 
      $(this).show(500); 
     }); 
     $('.columns').each(function(){ 
      $(this).show(500); 
     }); 
     $('#col1 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col1 h3').text('Earth Retention!'); 
     $('#col1 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col2 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col2 h3').text('Earth Retention!'); 
     $('#col2 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col3 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col3 h3').text('Earth Retention!'); 
     $('#col3 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col4 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col4 h3').text('Earth Retention!'); 
     $('#col4 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col5 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col5 h3').text('Earth Retention!'); 
     $('#col5 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col6 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col6 h3').text('Earth Retention!'); 
     $('#col6 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col7 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col7 h3').text('Earth Retention!'); 
     $('#col7 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col8').hide(500); 
    }); 

    $('#anime4').click(function(){ 
     $('.column').each(function(){ 
      $(this).show(500); 
     }); 
     $('.columns').each(function(){ 
      $(this).show(500); 
     }); 
     $('#col1 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col1 h3').text('Structural Support!'); 
     $('#col1 p:first').text('Structural Support text will be displayed here!'); 

     $('#col2 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col2 h3').text('Structural Support!'); 
     $('#col2 p:first').text('Structural Support text will be displayed here!'); 

     $('#col3 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col3 h3').text('Structural Support!'); 
     $('#col3 p:first').text('Structural Support text will be displayed here!'); 

     $('#col4 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col4 h3').text('Structural Support!'); 
     $('#col4 p:first').text('Structural Support text will be displayed here!'); 

     $('#col5 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col5 h3').text('Structural Support!'); 
     $('#col5 p:first').text('Structural Support text will be displayed here!'); 

     $('#col6 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col6 h3').text('Structural Support!'); 
     $('#col6 p:first').text('Structural Support text will be displayed here!'); 

     $('#col7 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col7 h3').text('Structural Support!'); 
     $('#col7 p:first').text('Structural Support text will be displayed here!'); 

     $('#col8 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col8 h3').text('Structural Support!'); 
     $('#col8 p:first').text('Structural Support text will be displayed here!'); 

    }); 

    $('#anime5').click(function(){ 
     $('.column').hide(500); 
     $('.columns').hide(500); 
    }); 
    $('#anime5').click(function(){ 
     $('.col4').show(500); 

     $('#col4 img').attr('src', 'img/lazy0.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col4 h3').text('Additional Technologies!'); 
     $('#col4 p:first').text('Additional Technologies text will be displayed here!'); 
    }); 

}); 

縮略圖：

<div class="row"> 
    <div class=" col-xs-12 col-sm-12 col-md-8 col-md-offset-2 col-lg-12"> 
      <ul class="nav nav-pills"> 
       <li role="presentation"><a id="anime1" href="#">Grouting</a></li> 
       <li role="presentation"><a id="anime2" href="#">Ground Improvements</a></li> 
       <li role="presentation"><a id="anime3" href="#">Earth Retention</a></li> 
       <li role="presentation"><a id="anime4" href="#">Structural Support</a></li> 
       <li role="presentation"><a id="anime5" href="#">Additional Technologies</a></li> 
      </ul> 
    </div> 
</div> 

    <div class="row"> 
     <p style="padding: 10px;"></p> 
    </div> 

     <div class="row"> 
      <div id="col1" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col2" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end--> 
      </div> 

      <div id="col3" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col4" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 animate_col4"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">Ovo ce da se animira za Additionl technologies.</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col5" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">Ovaj ce da se animira za Ground Impovements!</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col6" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col7" class="column col-xs-2 col-sm-2 col-md-2 col-md-offset-4 col-lg-2 col-lg-offset-4"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col8" class="column col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 
     </div><!--/ end thumbnai row --> 

Answer 1

附加一個觸發到處理程序選擇器

$('#anime1').click(function(){ 
    //... all the code you have 
}); 

修訂：

$('#anime1').click(function(){ 
    //... all the code you have 
}).trigger('click'); 

編輯：每評論修改後的代碼。代碼的審查

注意一些，這是偏好，有些人可能會矯枉過正，我會把我的推理上的每一個變化：

• 的代碼的功能，但很可能是一個痛苦的維持由於硬編碼的id需要與代碼中的標記相同。
• 您可以簡單地使用8列，並使用無標識的SAME標記，並使用類來啓用元素的代碼定位。這裏的一個好處是，鏈接的實際數量可能與文本，圖像等不同。這可以作爲基礎推入到文檔中，也可以使用ajax獲取更多。
• 爲了簡化我的評論，我會假設你只有5個「組」。其他鏈接可以添加到代碼客戶端或服務器端的數組中，直到您。
• 而不是在縮略圖中使用硬編碼內容，而是通過腳本將其注入，並在腳本中對這些值進行硬編碼。這將很難保持。

根據你的列標記示例：注意沒有id在這裏。

<div class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
    <div class="thumbnail"> 
     <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
     <div class="caption"> 
     <h3 class="thumbnail-head text-center">Text title, label, etc</h3> 
     <p class="thumbnail-desc text-center">descritpion here</p> 
     <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
     </div> 
    </div> 
    </div> 

鏈接，添加了兩件事情：一類爲 'A' 的標籤，並data-thing='與每一個名字。我們將使用這個thing通過名稱來定位一個JavaScript對象數組（查找它們）。

<ul class="nav nav-pills"> 
    <li role="presentation"><a id="anime1" class="mylinks" data-thing="grout" href="#">Grouting</a></li> 
    <li role="presentation"><a id="anime2" class="mylinks" data-thing="ground" href="#">Ground Improvements</a></li> 
    <li role="presentation"><a id="anime3" class="mylinks" data-thing="earth" href="#">Earth Retention</a></li> 
    <li role="presentation"><a id="anime4" class="mylinks" data-thing="struct" href="#">Structural Support</a></li> 
    <li role="presentation"><a id="anime5" class="mylinks" data-thing="tech" href="#">Additional Technologies</a></li> 
</ul> 

注意這些也可以從物體注入。

這是對象。我用「myApp」來命名它。在這個對象中，你可以看到數據以及我使用的一些功能。請參閱整個在線評論。

// create my namespace, use any preexisting namespace by that name. 
var myApp = myApp || {}; 

將數據添加到我們的命名空間

// This is the actual data object, it has some defaults that I use 
myApp.loadObject = { 
    defaultActiveLink: "grout", 
    animateHideDelay: 500, 
    animateShowDelay: 500, 
    defaultColumnCount: 8, 
    // array of "things" that we process (by name) 
    things: [{ 
    name: "grout",// used to lookup 
    linkText: "Grouting",// link text (if we wanted to inject it) 
    // array of links in THIS thing - we use these 
    columnData: [{ 
     "src": 'http://lorempixel.com/140/100/city', 
     "alt": "City", 
     "background": 'url(http://lorempixel.com/140/100/city)', 
     "headtext": 'Grouting0!', 
     "paragraphtext": 'Grouting 0 retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/city', 
     "alt": "City", 
     "background": 'url(http://lorempixel.com/140/100/city)', 
     "headtext": 'Grouting 1!', 
     "paragraphtext": 'Grouting1 retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/city', 
     "alt": "City", 
     "background": 'url(http://lorempixel.com/140/100/city)', 
     "headtext": 'Grouting2!', 
     "paragraphtext": 'Grouting2 retention text will be displayed here!' 
    }] 
    }, { 
    name: "ground", 
    linkText: "Ground Improvements", 
    columnData: [{ 
     "src": 'http://lorempixel.com/140/100/nature', 
     "alt": "Nature", 
     "background": 'url(http://lorempixel.com/140/100/nature)', 
     "headtext": 'Ground Improvements!', 
     "paragraphtext": 'Ground 1 retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/nature', 
     "alt": "Nature", 
     "background": 'url(http://lorempixel.com/140/100/nature)', 
     "headtext": 'Ground Improvements2!', 
     "paragraphtext": 'Improvements 2 retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/nature', 
     "alt": "Nature", 
     "background": 'url(http://lorempixel.com/140/100/nature)', 
     "headtext": 'Ground Improvements3!', 
     "paragraphtext": 'Ground 3 Improvements retention text will be displayed here!' 
    }] 
    }, { 
    name: "earth", 
    linkText: "Earth Retention", 
    columnData: [{ 
     "src": 'http://lorempixel.com/140/100/abstract', 
     "alt": "Abstract", 
     "background": 'url(http://lorempixel.com/140/100/abstract)', 
     "headtext": 'Earth1!', 
     "paragraphtext": 'Earth text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/abstract', 
     "alt": "Abstract", 
     "background": 'url(http://lorempixel.com/140/100/abstract)', 
     "headtext": 'Mother Earth!', 
     "paragraphtext": 'Mother Earth text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/abstract', 
     "alt": "Abstract", 
     "background": 'url(http://lorempixel.com/140/100/abstract)', 
     "headtext": 'Earthy!', 
     "paragraphtext": 'Earthy retention text will be displayed here!' 
    }] 
    }, { 
    name: "struct", 
    linkText: "Structural Support", 
    columnData: [{ 
     "src": 'http://lorempixel.com/140/100/cats', 
     "alt": "Cats", 
     "background": 'url(http://lorempixel.com/140/100/cats)', 
     "headtext": 'Stuctural!', 
     "paragraphtext": 'Structural retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/cats', 
     "alt": "Cats", 
     "background": 'url(http://lorempixel.com/140/100/cats)', 
     "headtext": 'Struct!', 
     "paragraphtext": 'Struct retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/cats', 
     "alt": "Cats", 
     "background": 'url(http://lorempixel.com/140/100/cats)', 
     "headtext": 'Struct Last!', 
     "paragraphtext": 'My Struct Last retention text will be displayed here!' 
    }] 
    }, { 
    name: "tech", 
    linkText: "Additional Technologies", 
    columnData: [{ 
     "src": 'http://lorempixel.com/140/100/food', 
     "alt": "Foody", 
     "background": 'url(http://lorempixel.com/140/100/food)', 
     "headtext": 'Tech!', 
     "paragraphtext": 'Tech Tech Tech text will be displayed here!' 
    }] 
    }] 
}; 

添加一些通用的功能，我們的命名空間：

// some generic functions to process my "object" not all these are used so you could clip it down a bit 
myApp.arrayObj = { 
    indexOf: function(myArray, searchTerm, property) { 
    for (var i = 0; i < myArray.length; i++) { 
     if (myArray[i][property] === searchTerm) return i; 
    } 
    return -1; 
    }, 
    indexAllOf: function(myArray, searchTerm, property) { 
    var ai = []; 
    for (var i = 0; i < myArray.length; i++) { 
     if (myArray[i][property] === searchTerm) ai.push(i); 
    } 
    return ai; 
    }, 
    lookup: function(myArray, searchTerm, property, firstOnly) { 
    var found = []; 
    var i = myArray.length; 
    while (i--) { 
     if (myArray[i][property] === searchTerm) { 
     found.push(myArray[i]); 
     if (firstOnly) break; //if only the first 
     } 
    } 
    return found; 
    }, 
    lookupAll: function(myArray, searchTerm, property) { 
    return this.lookup(myArray, searchTerm, property, false); 
    }, 
    remove: function(myArray, searchTerm, property, firstOnly) { 
    for (var i = myArray.length - 1; i >= 0; i--) { 
     if (myArray[i][property] === searchTerm) { 
     myArray.splice(i, 1); 
     if (firstOnly) break; //if only the first term has to be removed 
     } 
    } 
    } 
}; 

添加一些自定義功能我們的命名空間（也只有一個... ）

// custom functions 
myApp.func = { 
    /* activate the default specified by name */ 
    setDefault: function() { 
    var activeDefault = myApp.loadObject.defaultActiveLink; 
    var defaultIndex = myApp.arrayObj.indexOf(myApp.loadObject.things, activeDefault, "name"); 
    defaultIndex = !!activeDefault ? defaultIndex : 0; 
    $('.nav-pills').find('.mylinks').eq(defaultIndex).trigger('click'); 
    } 
}; 

標準的jQuery的東西，這可能是一個自定義函數，我們也稱之爲。 這基本上做什麼所有的代碼所做的：

// process on click, injecting the appropriate text 
$('.nav-pills').on('click', '.mylinks', function() { 
    // hide using the default hide delay in the object 
    $('.columns').hide(myApp.loadObject.animateHideDelay); 
    var thingtype = $(this).data('thing');// added to the link 
    var thing = myApp.arrayObj.lookup(myApp.loadObject.things, thingtype, "name", true);//lookup by name 
    var columns = $('.columns');// all the columns 
    // process the links,showing them 
    $.each(thing[0].columnData, function(index, item) { 
    // cache to not do multiple DOM searches 
    var tn = columns.eq(index).find('.thumbnail'); 
    var cap = tn.find('.caption'); 
    tn.find('img.img-thumbnail').attr('src', item.src).attr('alt', item.alt).prepend('background-image', item.background); 
    cap.find('h3.thumbnail-head').text(item.headtext); 
    cap.find('p.thumbnail-desc').text(item.paragraphtext); 
    // show this one 
    $('.columns').eq(index).show(myApp.loadObject.animateShowDelay); 
    }); 
}); 

$(function() { 
    // activate the default specified by name 
    myApp.func.setDefault(); 
}); 

Answer 2

好，最簡單的一種是

$("#anime1").click(); 

在文件準備結合事件之後，但這將動畫內容。

Answer 3

移動在全球範圍內點擊#anime1時調用的匿名函數併爲其命名。然後在準備好的文檔上調用它。

$(function(){ 

    $('#anime1').click(loadAnime1); 

    // Other click handlers 

}); 

function loadAnime1(){ 
    $('.column').each(function(){ 
    $(this).hide(500); 
    }); 
    $('.columns').each(function(){ 
    $(this).show(500); 

    $('#col1 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col1 h3').text('Grouting!'); 
    $('#col1 p:first').text('Grouting retention text will be displayed here!'); 

    $('#col2 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col2 h3').text('Grouting!'); 
    $('#col2 p:first').text('Grouting retention text will be displayed here!'); 

    $('#col3 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col3 h3').text('Grouting!'); 
    $('#col3 p:first').text('Grouting retention text will be displayed here!'); 

    $('#col4 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col4 h3').text('Grouting!'); 
    $('#col4 p:first').text('Grouting retention text will be displayed here!'); 

    $('#col5 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col5 h3').text('Grouting!'); 
    $('#col5 p:first').text('Grouting retention text will be displayed here!'); 

    $('#col6 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col6 h3').text('Grouting!'); 
    $('#col6 p:first').text('Grouting retention text will be displayed here!'); 
    }); 
} 

$(document).ready(function() { 
    loadAnime1(); 
})