Loaind gif while image not loaded

[Rodrigo Selada]

Hi!


I'm trying to use RadRotator as a simple thumb rotative Image Gallery. I would like to show the loading gif while the image is not fully loaded and visible in the client. My problem is to remove the background Loading image. Is there anyway of doing that? I've tried to use the onload image DOM event to run javascript that does the pretended, but I can't know which image fired the function :-|.

The desired effect is this.

Regards,
Rodrigo S.

[Martin]

Hello Rodrigo Selada,

There is an easier and more unobtrusive way to add loading image while the actual image is loaded. This can be done with CSS only, and the effect is the same. All you have to do is to create a loading image, and then apply it either to the li.rrItem or to the li.rrItem img elements of the rotator, i.e:

li.rrItem
{
    background: white url('Loading.gif') no-repeat center;
}

or

li.rrItem img
{
    background: white url('Loading.gif') no-repeat center;
}

If you decide to use the second approach have in mind that you can apply a background image to an img tag only in standards compliance mode.

Regards,
Martin Ivanov
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.

[Rodrigo Selada]

Hi Martin!

Thank you for the fast answer. The solution given, in my project, has a problem. I have a canvas os 140x106px but some images are smaller and I, explicitly, put them on the bottom of the canvas. In this situation the loading gif image (which has to be on the center of the canvas) stays visible despite the image is already visible (see example here).

Meanwhile I managed to accomplish what I was looking for, but you may tell-me if it has anything wrong or if exists any straightforward solution.

I have my image wrapped on a div (that I use for other purposes) with a css that has the loading gif image as background.:

div.imgAnchorLoading

{

background-image: url('../img/Loading/CircleBlue.gif');

background-position:center;

background-repeat:no-repeat;

}

I have also subscribed the RR OnClientItemClicked property to a javascript function that searches for all images on the RR and subscribe the DOM onload event, giving the wrapping div as parameter.

function RotatorLoaded(sender, args) {
    var imgs = $get("RadRotator1").getElementsByTagName('img');

    var i;
    for (i = 0; i < imgs.length; i++)
        imgs[i].onload = function() { clearElementCss(this.parentNode, "imgAnchorLoading"); };
}

When the image onload event fires, I remove the css with the load gif image from the div css classes.

function clearElementCss(sender, cssClass) {
    if (sender.className.indexOf(" " + cssClass) > -1)
        cssClass = " " + cssClass;

    sender.className = sender.className.replace(cssClass, "");
}

Is this way correct?

Regards,

Rodrigo S.

[Martin]

Hi Rodrigo Selada,

Congratulations on putting the code to work. It seems that it is okay and does not need further tweaks or anything else.

Kind regards,
Martin Ivanov
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.

[Martin Roussel]

Hi, I would like to implement Rodrigo's workaround but it seems the control changed since this post was created (GetElementByTagName() seem to be not existing now). Here's my code where I employ get_items(). Note that I define my RR item in code-behind:

function RadRotator1_OnClientLoad(sender, args) {

                             var rotator = $find("<%= RadRotator1.ClientID %>");

 

                            var imgs = rotator.get_items();

 

                            var i;

                            for (i = 0; i < imgs.length; i++)

                                imgs[i].onload = function () { clearElementCss(this.parentNode, "RotatorLoading"); };

}

function clearElementCss(sender, cssClass) {
                        if (sender.className.indexOf(" " + cssClass) > -1)
                            cssClass = " " + cssClass;

                        sender.className = sender.className.replace(cssClass, "");
} 


<telerik:RadRotator ID="RadRotator1" runat="server" Skin="WebBlue" CssClass="RadRotatorCentered" RotatorType="Buttons" Width="264" Height="142" ItemHeight="142" ItemWidth="224" FrameDuration="1" ScrollDirection="Left,Right" OnClientLoad="RadRotator1_OnClientLoad">
</telerik:RadRotator>

My problem is that imgs.length is always 0, even if I have images in my RadRotator. Is it because
I dont employ the right event? I tried with OnClientItemClicked and same thing.

Additional question: how to position smaller images in center of RR canvas?

TIA

Martin

[Slav]

Hi Martin,

The items in the RadRotator should be available when the OnClientLoad client-side event is fired. Please elaborate on the approach that you used for data-binding the control and its location on the page, e.g. if it is in another control. A sample project that isolates the problem will also be useful for pinpointing its cause.

As for centering the displayed image in the rotator item's template, you can achieve this by adding the following CSS code to your page:

<style type="text/css">
    .RadRotator .rrItem div[id^="RadRotator1"] {
        height: 213px; /* the item height is used */
        width: 250px; /* the item width is used */
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
</style>

Note that the values of the properties ItemWidth and ItemHeight should be used in the style above, RadRotator1 in the CSS selector should be replaced with the id of your rotator. Also, the code above is designed for a rotator that contains only a single image in an item. If the layout of your items is more complex, you will have to modify the CSS accordingly.

All the best,
Slav
the Telerik team

[Martin Roussel]

Slav,

Im not sure what ive changed since then but for some reason now im getting the right lenght. The problem im now having is with this particular line:

imgs[i].onload = function () { clearElementCss(this.parentNode, "RotatorLoading"); };

It seems that "clearElementCSS" never get called. I tried replace it with a simple dummy function with no parameter and it never get called neither. No error in the browser. Do you have an idea of what it can be?

As for the image centering, ive modified your solution a bit since im loading my rotator dynamically in a placeholder (so ID is never the same), but got it by setting the css for each item by using the CssClass server-side property when creating each of them. thanks to you.

Martin

[Slav]

Hi Martin,

I noticed that you are attaching the onload handler to the client-side objects of the RadRotator items, which are contained in the collection imgs. In order to catch the onload event of the images you need to reference the image in every item and set its onload property. This is shown in the following sample:

function RadRotator1_OnClientLoad(sender, args) {
    var rotator = sender;

    var imgs = rotator.get_items();
    var i;
    for (i = 0; i < imgs.length; i++)
        imgs[i].get_element().getElementsByTagName("img")[0].onload = function () { clearElementCss(this.parentNode, "RotatorLoading"); };
}

Greetings,
Slav
the Telerik team

[Martin Roussel]

Thanks Slav!

here is my final client-side code in case in might help others:

function RadRotator1_OnClientLoad(sender, args) {
                        setTimeout(function () {
                            var rotator = $find("<%= RadRotator1.ClientID %>");

                            var imgs = rotator.get_items();

                            var i;
                            for (i = 0; i < imgs.length; i++) {
                                imgs[i].get_element().getElementsByTagName("img")[0].onload = function () { clearElementCss(this.parentNode, "RotatorLoading"); };
                            }

                        }, 0);
                    }


                    function clearElementCss(sender, cssClass) {
                        if (sender.className.indexOf(" " + cssClass) > -1) {
                            cssClass = " " + cssClass;
                            sender.className = sender.className.replace(cssClass, "");
                        }
                    }