Remove From My Forums

Having default image come up before real one loads

Question

I would like to have a "Loading" type gif come up before my image has actually loaded into my grid. That is, I have a template like the following below. Currently, I get a "redx" type display until the image loads. I want it to show my animated gif before the actual image loads. Suggestions?

 <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
            
            <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <div class="item-overlay">
                <h4 class="item-title" data-win-bind="textContent: title"></h4>
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
            </div>
        </div>

Peter Kellner http://peterkellner.net Microsoft MVP • ASPInsider

Monday, October 29, 2012 1:59 AM

Answers

Hi,

You could have a try with jquery lazyload. But there need some thing to change.

The code like follow:

<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ListViewExample</title>
    <script src="/js/jquery.min.js"></script> 
<script src="/js/lazyload.js"></script>
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- ListViewExample references -->
    <link href="/listview/default.css" rel="stylesheet">
    <script src="/listview/default.js"></script>
    <script src="/listview/scriptdata.js"></script>

     
<script type="text/javascript">
    $(document).ready(function () {
        $("img.lazy").lazyload(
        {
            placeholder: "http://jquerystyle.com/-/img/ajaxLoader.gif",
            effect: "fadeIn"
        });
    });
</script> 
</head>
<body>
     <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img  class="lazy" src='http://jquerystyle.com/-/img/ajaxLoader.gif' style="width: 60px; height: 60px;opacity: 1!important;"" 
                 data-win-bind="alt: title; name: picture" />
            <div>
                
                <!-- Displays the "title" field. -->
                <h4 data-win-bind="innerText: title"></h4>

                <!-- Displays the "text" field. --> 
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>       

    <div id="basicListView" data-win-control="WinJS.UI.ListView" 
        data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'),
            oniteminvoked : handler}">
    </div>
</body>
</html>

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com
Microsoft One Code Framework

Marked as answer by Song Tian Monday, November 5, 2012 9:46 AM

Monday, October 29, 2012 12:26 PM

All replies

Hi,

You could have a try with jquery lazyload. But there need some thing to change.

The code like follow:

<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ListViewExample</title>
    <script src="/js/jquery.min.js"></script> 
<script src="/js/lazyload.js"></script>
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- ListViewExample references -->
    <link href="/listview/default.css" rel="stylesheet">
    <script src="/listview/default.js"></script>
    <script src="/listview/scriptdata.js"></script>

     
<script type="text/javascript">
    $(document).ready(function () {
        $("img.lazy").lazyload(
        {
            placeholder: "http://jquerystyle.com/-/img/ajaxLoader.gif",
            effect: "fadeIn"
        });
    });
</script> 
</head>
<body>
     <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img  class="lazy" src='http://jquerystyle.com/-/img/ajaxLoader.gif' style="width: 60px; height: 60px;opacity: 1!important;"" 
                 data-win-bind="alt: title; name: picture" />
            <div>
                
                <!-- Displays the "title" field. -->
                <h4 data-win-bind="innerText: title"></h4>

                <!-- Displays the "text" field. --> 
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>       

    <div id="basicListView" data-win-control="WinJS.UI.ListView" 
        data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'),
            oniteminvoked : handler}">
    </div>
</body>
</html>

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com
Microsoft One Code Framework

Marked as answer by Song Tian Monday, November 5, 2012 9:46 AM

Monday, October 29, 2012 12:26 PM

1

Sign in to vote

Where is js/lazyload.js found?
Peter Kellner http://peterkellner.net Microsoft MVP • ASPInsider

Monday, October 29, 2012 6:06 PM
0

Sign in to vote

Hi,

You could find that at:

http://www.appelsiini.net/projects/lazyload/jquery.lazyload.js?v=3

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com
Microsoft One Code Framework

Tuesday, October 30, 2012 1:56 AM

I did get it working but somehow I am not understanding the sizeing. Now, my wait image and pictures are coming out small. I'm using practically the identical code as file/new/template in vs2012. Below is code and picture

 





<script type="text/javascript">
        $(document).ready(function () {
            $("img.item-image").lazyload(
            {
                placeholder: "http://jquerystyle.com/-/img/ajaxLoader.gif",
                effect: "fadeIn"
            });
        });
 </script> 

 <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
            
         <!--   <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
          -->  
            <img  class="item-image" src='http://jquerystyle.com/-/img/ajaxLoader.gif' 
                   style="width: 60px; height: 60px;opacity: 1!important;"
                  data-win-bind="src: backgroundImage; alt: title" />

            <div class="item-overlay">
                <h4 class="item-title" data-win-bind="textContent: title"></h4>
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
            </div>
        </div>

Peter Kellner http://peterkellner.net Microsoft MVP • ASPInsider

Tuesday, October 30, 2012 3:53 PM

0

Sign in to vote

Hi,

Then please have a debug with DOM Explorer.

Any more question, please feel free to reply.
Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com
Microsoft One Code Framework

Wednesday, October 31, 2012 2:44 AM
0

Sign in to vote

turns out all I need to do was set the img src tag to some other image. I found this out at BUILD from another engineer.
Peter Kellner http://peterkellner.net Microsoft MVP • ASPInsider

Monday, November 5, 2012 1:53 PM

Answered by:

Having default image come up before real one loads

Question

Answers

All replies