Add lazyload in Layouts topics for all versions

en/components/avatar.md

@@ -67,7 +67,7 @@ Let's enhance our avatar by making it circular and bigger in size. We can also c
 If all went well, you should see something like the following in the browser:
 
 <div class="sample-container loading" style="height:100px">
-    <iframe id="avatar-sample-1-iframe" src='{environment:demosBaseUrl}/layouts/avatar-sample-1' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="avatar-sample-1-iframe" data-src='{environment:demosBaseUrl}/layouts/avatar-sample-1' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 
 ####Avatar displaying image
@@ -89,7 +89,7 @@ To get an avatar that dispalays an image, all you have to do is setting the imag
 If all went well, you should see something like the following in the browser:
 
 <div class="sample-container loading" style="height:100px">
-    <iframe id="avatar-sample-2-iframe" src='{environment:demosBaseUrl}/layouts/avatar-sample-2' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="avatar-sample-2-iframe" data-src='{environment:demosBaseUrl}/layouts/avatar-sample-2' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 
 ####Avatar displaying icon

en/components/card.md

@@ -55,9 +55,8 @@ Then in the template of our info card component we can add the following code to
 ```
 
 If all went well, you should see the following card in your browser:
-<div class="sample-container" style="height: 300px">
-    <iframe id="card-sample-1-iframe" src='{environment:demosBaseUrl}/card-sample-1'
-        width="100%" height="100%" seamless frameBorder="0"  onload="onSampleIframeContentLoaded(this);"></iframe>
+<div class="sample-container loading" style="height: 300px">
+    <iframe id="card-sample-1-iframe" data-src='{environment:demosBaseUrl}/card-sample-1' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="card-sample-1-iframe" data-demos-base-url="{environment:demosBaseUrl}">view on stackblitz</button>
@@ -105,8 +104,8 @@ Next, we need to update the template for our card to show a round-shaped avatar
 ```
 
 At this point the card should look similar to the following:
-<div class="sample-container" style="height: 480px">
-    <iframe id="card-sample-2-iframe" src='{environment:demosBaseUrl}/layouts/card-sample-2' width="100%" height="100%" seamless frameBorder="0"  onload="onSampleIframeContentLoaded(this);"></iframe>
+<div class="sample-container loading" style="height: 480px">
+    <iframe id="card-sample-2-iframe" data-src='{environment:demosBaseUrl}/layouts/card-sample-2' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="card-sample-2-iframe" data-demos-base-url="{environment:demosBaseUrl}">view on stackblitz</button>
@@ -173,8 +172,7 @@ public icons = ['add', 'star'];
 Easy, right? Let's see how it turned out in the browser:
 
 <div class="sample-container loading" style="height: 400px">
-    <iframe id="card-sample-3-iframe" seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/layouts/card-sample-3"
-        onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="card-sample-3-iframe" seamless="" width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/layouts/card-sample-3" class="lazyload"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn"

en/components/carousel.md

@@ -9,8 +9,8 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 <div class="divider"></div>
 
 ### Carousel Demo
-<div class="sample-container" style="height: 620px">
-    <iframe seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/layouts/carousel-sample-4"></iframe>
+<div class="sample-container loading" style="height: 620px">
+    <iframe seamless="" width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/layouts/carousel-sample-4" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 
 
@@ -45,8 +45,8 @@ Then in the template of our carousel component we can add the following markup t
 
 This is enough to have the carousel instantiated on our page, let's have a look at it:
 
-<div class="sample-container" style="height: 230px">
-    <iframe id="carousel-sample-1-iframe" src='{environment:demosBaseUrl}/layouts/carousel-sample-1' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
+<div class="sample-container loading" style="height: 230px">
+    <iframe id="carousel-sample-1-iframe" data-src='{environment:demosBaseUrl}/layouts/carousel-sample-1' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn"   data-iframe-id="carousel-sample-1-iframe" data-demos-base-url="{environment:demosBaseUrl}">                view on stackblitz
@@ -105,8 +105,8 @@ a > igx-icon > span{
 
 Let's see what we have now, sure looks better with the arrows standing out clearly on both sides and all the content centered:
 
-<div class="sample-container" style="height: 600px">
-<iframe id="carousel-sample-2-iframe" src='{environment:demosBaseUrl}/layouts/carousel-sample-2' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
+<div class="sample-container loading" style="height: 600px">
+<iframe id="carousel-sample-2-iframe" data-src='{environment:demosBaseUrl}/layouts/carousel-sample-2' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn"   data-iframe-id="carousel-sample-2-iframe" data-demos-base-url="{environment:demosBaseUrl}">                view on stackblitz
@@ -197,8 +197,8 @@ ul.igx-carousel__indicators {
 
 Following all the steps above brings us a nice and functional carousel that the user has full control over using the navigation arrows. The linear bar provides adittional UI that acts as an indicator of the user progress:
 
-<div class="sample-container" style="height: 550px">
-    <iframe id="carousel-sample-3-iframe" src='{environment:demosBaseUrl}/layouts/carousel-sample-3' width="100%" height="100%" seamless frameBorder="0"  onload="onSampleIframeContentLoaded(this);"></iframe>
+<div class="sample-container loading" style="height: 550px">
+    <iframe id="carousel-sample-3-iframe" data-src='{environment:demosBaseUrl}/layouts/carousel-sample-3' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn"   data-iframe-id="carousel-sample-3-iframe" data-demos-base-url="{environment:demosBaseUrl}">                view on stackblitz
@@ -235,8 +235,8 @@ Don't forget to add the **IgxButtonModule** to the **app.component.ts**. The `go
 ```
 Given this configuration, the router matches that URL to the given route path **/details:index** and displays the corresponding page:
 
-<div class="sample-container" style="height: 620px">
-    <iframe src='{environment:demosBaseUrl}/layouts/carousel-sample-4' width="100%" height="100%" seamless frameBorder="0"></iframe>
+<div class="sample-container loading" style="height: 620px">
+    <iframe data-src='{environment:demosBaseUrl}/layouts/carousel-sample-4' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 
 ###API References

en/components/expansion_panel.md

@@ -92,7 +92,7 @@ The css classes `.igx-expansion-panel__header` and `.igx-expansion-panel__body`
 
 You can see the results below:
 <div class="sample-container loading" style="height: 400px;">
-    <iframe id="expansion-sample-1-sample" frameborder="0" seamless width="100%" height="100%" src="{environment:demosBaseUrl}/layouts/expansion-sample-1" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="expansion-sample-1-sample" frameborder="0" seamless="" width="100%" height="100%" data-src="{environment:demosBaseUrl}/layouts/expansion-sample-1" class="lazyload"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" class="stackblitz-btn" data-iframe-id="expansion-sample-1-sample" data-demos-base-url="{environment:demosBaseUrl}">view on stackblitz</button>
@@ -147,7 +147,7 @@ export class ExpansionPanelComponent {
 
 Below we have the results:
 <div class="sample-container loading" style="height: 400px;">
-    <iframe id="expansion-sample-2-sample" frameborder="0" seamless width="100%" height="100%" src="{environment:demosBaseUrl}/layouts/expansion-sample-2" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="expansion-sample-2-sample" frameborder="0" seamless="" width="100%" height="100%" data-src="{environment:demosBaseUrl}/layouts/expansion-sample-2" class="lazyload"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" class="stackblitz-btn" data-iframe-id="expansion-sample-2-sample" data-demos-base-url="{environment:demosBaseUrl}">view on stackblitz</button>
@@ -240,7 +240,7 @@ export class ExpansionPanelComponent {
 ### Summary
 After applying all of the changes to our initial component, here is the final result:
 <div class="sample-container loading" style="height: 500px;">
-    <iframe id="expansion-sample-3-sample" frameborder="0" seamless width="100%" height="100%" src="{environment:demosBaseUrl}/layouts/expansion-sample-3" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="expansion-sample-3-sample" frameborder="0" seamless="" width="100%" height="100%" data-src="{environment:demosBaseUrl}/layouts/expansion-sample-3" class="lazyload"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" class="stackblitz-btn" data-iframe-id="expansion-sample-3-sample" data-demos-base-url="{environment:demosBaseUrl}">view on stackblitz</button>
@@ -337,7 +337,7 @@ The sample shows some user information and the key point here is passing the ani
 
 You can see the results below:
 <div class="sample-container loading" style="height: 350px;">
-    <iframe id="expansion-sample-6-sample" frameborder="0" seamless width="100%" height="100%" src="{environment:demosBaseUrl}/layouts/expansion-sample-6" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="expansion-sample-6-sample" frameborder="0" seamless="" width="100%" height="100%" data-src="{environment:demosBaseUrl}/layouts/expansion-sample-6" class="lazyload"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" class="stackblitz-btn" data-iframe-id="expansion-sample-6-sample" data-demos-base-url="{environment:demosBaseUrl}">view on stackblitz</button>
@@ -514,7 +514,7 @@ export class ExpansionPanelComponent {
 ```
 You can see the results below:
 <div class="sample-container loading" style="height: 550px;">
-    <iframe id="expansion-sample-5-sample" frameborder="0" seamless width="100%" height="100%" src="{environment:demosBaseUrl}/layouts/expansion-sample-5" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="expansion-sample-5-sample" frameborder="0" seamless="" width="100%" height="100%" data-src="{environment:demosBaseUrl}/layouts/expansion-sample-5" class="lazyload"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" class="stackblitz-btn" data-iframe-id="expansion-sample-5-sample" data-demos-base-url="{environment:demosBaseUrl}">view on stackblitz</button>
@@ -616,7 +616,7 @@ export const data = {
 
 You can see the results below:
 <div class="sample-container loading" style="height: 600px;">
-    <iframe id="expansion-sample-7-sample" frameborder="0" seamless width="100%" height="100%" src="{environment:demosBaseUrl}/layouts/expansion-sample-7" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="expansion-sample-7-sample" frameborder="0" seamless="" width="100%" height="100%" data-src="{environment:demosBaseUrl}/layouts/expansion-sample-7" class="lazyload"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" class="stackblitz-btn" data-iframe-id="expansion-sample-7-sample" data-demos-base-url="{environment:demosBaseUrl}">view on stackblitz</button>

en/components/tabbar.md

@@ -55,8 +55,7 @@ Then, modify the component's template to include the Bottom Navigation and add t
 If all went well, you should see the following in your browser:
 
 <div class="sample-container loading" style="height: 200px; width: 300px; border: 1px solid gray;">
-    <iframe id="tabbar-sample-1-iframe" src='{environment:demosBaseUrl}/layouts/tabbar-sample-1' width="100%" height="100%" seamless
-        frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="tabbar-sample-1-iframe" data-src='{environment:demosBaseUrl}/layouts/tabbar-sample-1' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <div>
 <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="tabbar-sample-1-iframe"
@@ -158,8 +157,7 @@ Finally add the CSS classes used by the DIV and SPAN elements of the template to
 After these modifications our Bottom Navigation should look similar to this:
 
 <div class="sample-container loading" style="height: 350px; width: 300px; border: 1px solid gray;">
-    <iframe id="tabbar-sample-2-iframe" src='{environment:demosBaseUrl}/layouts/tabbar-sample-2' width="100%" height="100%" seamless
-        frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="tabbar-sample-2-iframe" data-src='{environment:demosBaseUrl}/layouts/tabbar-sample-2' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <div>
 <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="tabbar-sample-2-iframe"

en/components/tabs.md

@@ -53,8 +53,7 @@ Then, specify several tabs groups with [`label`]({environment:angularApiUrl}/cla
 If the sample is configured properly, the final result should look like that:
 
 <div class="sample-container loading" style="height: 200px; width: 600px; border: 1px solid gray;">
-    <iframe id="tabs-sample-1-iframe" src='{environment:demosBaseUrl}/layouts/tabs-sample-1' width="100%" height="100%" seamless
-        frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="tabs-sample-1-iframe" data-src='{environment:demosBaseUrl}/layouts/tabs-sample-1' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <div>
 <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="tabs-sample-1-iframe"
@@ -98,8 +97,7 @@ Nevertheless what type of tabs you have chosen, the tab header width is limited
 ```
 
 <div class="sample-container loading" style="height: 450px; width: 800px;">
-    <iframe id="tabs-sample-2-iframe" src='{environment:demosBaseUrl}/layouts/tabs-sample-2' width="100%" height="100%" seamless
-        frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="tabs-sample-2-iframe" data-src='{environment:demosBaseUrl}/layouts/tabs-sample-2' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <div>
 <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="tabs-sample-2-iframe"
@@ -159,8 +157,7 @@ First add the Material+Icons import in your 'styles.css' file in the main applic
 If the sample is configured properly, the tabs should look like the following example:
 
 <div class="sample-container loading" style="height: 250px; width: 600px;">
-    <iframe id="tabs-sample-3-iframe" src='{environment:demosBaseUrl}/layouts/tabs-sample-3' width="100%" height="100%" seamless
-        frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="tabs-sample-3-iframe" data-src='{environment:demosBaseUrl}/layouts/tabs-sample-3' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <div>
 <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="tabs-sample-3-iframe"
@@ -291,9 +288,8 @@ public ngOnInit() {
 }
 ```
 
-<div class="sample-container loading" >
-    <iframe id="tabs-sample-4-iframe" src='{environment:demosBaseUrl}/layouts/tabs-sample-4' seamless
-        frameBorder="0" style="display: none"></iframe>
+<div class="sample-container loading">
+    <iframe id="tabs-sample-4-iframe" data-src='{environment:demosBaseUrl}/layouts/tabs-sample-4' seamless="" frameBorder="0" style="display: none" class="lazyload"></iframe>
 </div>
 <div>
 <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="tabs-sample-4-iframe"
@@ -384,9 +380,8 @@ const routes: Routes = [
 ...
 ```
 
-<div class="sample-container loading" >
-    <iframe id="tabs-sample-5-iframe" src='{environment:demosBaseUrl}/layouts/tabs-sample-5' seamless
-        frameBorder="0" style="display: none"></iframe>
+<div class="sample-container loading">
+    <iframe id="tabs-sample-5-iframe" data-src='{environment:demosBaseUrl}/layouts/tabs-sample-5' seamless="" frameBorder="0" style="display: none" class="lazyload"></iframe>
 </div>
 <div>
 <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="tabs-sample-5-iframe"

jp/components/avatar.md

@@ -1,4 +1,4 @@
----
+---
 title: Avatar コンポーネント
 _description: Ignite UI for Angular の Avatar コントロールは、プロファイル ボタンなどのアプリケーションのインスタンスに画像、マテリアル アイコン、またはイニシャルを追加できます。
 _keywords: Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スィート, ネイティブ Angular コントロール, ネイティブ Angular コンポーネント ライブラリ, Angular Avatar コンポーネント, Angular Avatar コントロール
@@ -71,7 +71,7 @@ Avatar の形式は四角または丸で、3 つのサイズ オプション (
 以下は結果です。
 
 <div class="sample-container loading" style="height:100px">
-    <iframe id="avatar-sample-1-iframe" src='{environment:demosBaseUrl}/layouts/avatar-sample-1' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="avatar-sample-1-iframe" data-src='{environment:demosBaseUrl}/layouts/avatar-sample-1' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 
 #### 画像を表示するアバター
@@ -94,7 +94,7 @@ Avatar の形式は四角または丸で、3 つのサイズ オプション (
 以下は結果です。
 
 <div class="sample-container loading" style="height:100px">
-    <iframe id="avatar-sample-2-iframe" src='{environment:demosBaseUrl}/layouts/avatar-sample-2' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="avatar-sample-2-iframe" data-src='{environment:demosBaseUrl}/layouts/avatar-sample-2' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 
 #### アイコンを表示するアバター