RadMenu Image Preload

[Sahil Khan]

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.

[T. Tsonev]

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.

[Sahil Khan]

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

[T. Tsonev]

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.

[Sahil Khan]

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

[Ryan Mariotti]

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

[T. Tsonev]

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.

[Ryan Mariotti]

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