RadMenu Image Preload

8 posts, 1 answers
  1. Sahil Khan
    Sahil Khan avatar
    13 posts
    Member since:
    Jun 2009

    Posted 28 Dec 2009 Link to this post

    Hi,

    I was experimenting with the samples of RadMenu and was testing the sample in which the menu items are made of only images. What I noticed is that when I hover my mouse over various items, their onHover image gets loaded at that particular time which causes some delay before reflecting that the menu item has been selected. It is due to the time it takes to load the state images.

    I would like to suggest could you please make the menu Preload images before the menu gets rendered on screen. That is the images of the states should not be loaded at the time of hovering, instead in the beginning of the page, and the various states should be reflected at the same time. This is annoying infact to have to wait until the item image loads, which can take some time based on the size of the file, and I feel that it takes away the professional touch.

    Thank you.
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2815 posts

    Posted 28 Dec 2009 Link to this post

    Hi Sahil,

    Preloading the images can indeed contribute to a better user experience. You can do it using the following JavaScript code:

    <script type="text/javascript">
        Sys.Application.add_load (function()
        {
            var menu = $find("<%= RadMenu1.ClientID %>");
             
            // jQuery alias
            var $ = $telerik.$;
                 
            // Create a placeholder for the images
            var placeholder = $("<div style='display:none;'></div>").appendTo(document.body);
             
            var items = menu.get_allItems();
            for (var i = 0, length = items.length; i < length; i++)
            {
                // Load each hover image in the placeholder
                var hoverImageUrl = items[i].get_hoveredImageUrl();
                if (hoverImageUrl)
                    placeholder.append($("<img src='" + hoverImageUrl + "' />"));
            }
             
            // Remove the placeholder as it's no longer needed
            placeholder.remove();
        });
    </script>

    Happy holidays!

    Regards,
    Tsvetomir Tsonev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Sahil Khan
    Sahil Khan avatar
    13 posts
    Member since:
    Jun 2009

    Posted 28 Dec 2009 Link to this post

    Thanks for the code Tsvetomir. But I think you should add this as a feature to the control rather. It is a hassle to add the above code every time a control is used. You can even make the feature optional by providing the capability to turn it on or off.

    Happy holidays to you too..!

    With regards,
    Sahil
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2815 posts

    Posted 28 Dec 2009 Link to this post

    Hello Sahil,

    We will log this suggestion for implementation. I agree that it can be useful, especially for image-only menus. We won't turn it on by default as this might not be always desired.

    Thank you for bringing this issue to our attention.

    Best wishes,
    Tsvetomir Tsonev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Sahil Khan
    Sahil Khan avatar
    13 posts
    Member since:
    Jun 2009

    Posted 28 Dec 2009 Link to this post

    Hi Tsvetomir,

    Sure, you can make it optional by providing the ability to turn it on or off but it is a valuable addition. Its my pleasure to be of  assistance.


    With regards,
    Sahil
  6. Ryan Mariotti
    Ryan Mariotti avatar
    11 posts
    Member since:
    Mar 2010

    Posted 26 Mar 2010 Link to this post

    Tsvetomir,

    I came accross this post when looking for solutions to avoid the spinning Internet Explorer "e" every time I moused-over my RadMenu items.  Your javascript pre-load solution works in Firefox, but not IE (I'm using IE7).  Might you be able to update the code so it works properly on IE (most popular browser still)? 

    I tried clearing my Temp Internet Files, but to no effect.  Thank you!

    Ryan
  7. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2815 posts

    Posted 30 Mar 2010 Link to this post

    Hi Ryan,

    I think I tested with IE as well. Anyway, maybe it's playing smart and is not loading images within display:none elements. Try it with visibility: hidden

    <script type="text/javascript">
        Sys.Application.add_load (function()
        {
            var menu = $find("<%= RadMenu1.ClientID %>");
              
            // jQuery alias
            var $ = $telerik.$;
                  
            // Create a placeholder for the images
            var placeholder = $("<div style='visibility:hidden; position: absolute; left: -4000px;'></div>").appendTo(document.body);
              
            var items = menu.get_allItems();
            for (var i = 0, length = items.length; i < length; i++)
            {
                // Load each hover image in the placeholder
                var hoverImageUrl = items[i].get_hoveredImageUrl();
                if (hoverImageUrl)
                    placeholder.append($("<img src='" + hoverImageUrl + "' />"));
            }
              
            // Remove the placeholder as it's no longer needed
            placeholder.remove();
        });
    </script>

    I hope this helps.

    Regards,
    Tsvetomir Tsonev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  8. Ryan Mariotti
    Ryan Mariotti avatar
    11 posts
    Member since:
    Mar 2010

    Posted 31 Mar 2010 Link to this post

    Tsvetomir,

    The image preloading works - even with your original code (display:none;).  Turns out that my IE Temporary Internet Files settings were set to "Every time I visit the webpage", so IE wasn't allowing caching.  Once I updated to "Automatic", the images loaded correctly.  Thanks for your help,

    Ryan
Back to Top