Loaind gif while image not loaded

9 posts, 1 answers
  1. Rodrigo Selada
    Rodrigo Selada avatar
    23 posts
    Member since:
    Nov 2008

    Posted 23 Sep 2009 Link to this post


    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.
  2. Martin
    Admin
    Martin avatar
    585 posts

    Posted 23 Sep 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rodrigo Selada
    Rodrigo Selada avatar
    23 posts
    Member since:
    Nov 2008

    Posted 23 Sep 2009 Link to this post


    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-imageurl('../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.

  5. Answer
    Martin
    Admin
    Martin avatar
    585 posts

    Posted 28 Sep 2009 Link to this post

    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.
  6. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 30 Jan 2013 Link to this post

    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
  7. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 04 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 04 Feb 2013 Link to this post

    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


  9. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 07 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 07 Feb 2013 Link to this post

    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, "");
                            }
                        }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017