0

I created 3 pages- mainpage.php, post.php, display.php.
mainpage has the main chat interface with a div id 'chatbox', and a textarea with a submit button. On click of the submit button, use jQuery to call post.php & enter the user's message into the Database. There is no trouble in this.

Then I use the jQuery ajax method (see below) to call display.php and place the content returned into the chatbox div. Here's the code:

function loadLog(){  
        if(counter>1)
                    delaytime=2500;
        counter++;
                var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; 
        var id=$("#ID").val();
        var _url='display.php?Id='+id;
        $.ajax({  
            url:_url,
            cache: false,  
            success: function(html){  
                $("#chatbox").html(html); //Insert chat from DB into the #chatbox div       
                var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; 
                if(newscrollHeight > oldscrollHeight){  
                    $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal');  
                }  
            },  
        });  
    }

Note: this is a function which is called at interval of 2500 milliseconds- 

setInterval (loadLog, delaytime);

This works fine too.

Now, in display.php, I used 

echo PIPHP_ReplaceSmileys($chatdisp['Msg'], 'smileys/');

to display smileys inside the chat. The code for this is here: http://pluginphp.com/plug-in59.php

My problem: Since we are refreshing display.php every 2500 milliseconds, the emoticons blink every time they are displayed. This doesn't happen with text since text is quick while images take time to load. This is less than ideal. Is there a way to prevent this blinking?

fredley
  • 32,953
  • 42
  • 145
  • 236
P.C.
  • 651
  • 13
  • 30

1 Answers1

3

Try to set smiles as background. 1 large file with all emotions. It will be loaded once, after that You can easily set smile with class definition on block. Ex: <div class="emotion lol"></div>

Egor Sazanovich
  • 4,979
  • 5
  • 23
  • 37
  • +1 - CSS sprites are probably the best solution for this use-case. – FtDRbwLXw6 Jan 04 '12 at 13:59
  • @EgorSazanovich which page should i set the smileys as background to? – P.C. Jan 05 '12 at 03:14
  • @TomMedley image sprites will also be one image at the end of the day. And we just display parts of the image. Trouble is that image too will have to load every time refresh is pressed... So how would it work? – P.C. Jan 05 '12 at 03:19
  • The code works perfectly in some browsers... not in others :( – P.C. Jan 05 '12 at 03:19
  • @PrernaChikersal `Trouble is that image too will have to load every time refresh is pressed` It will not be loaded again, thanks browser's cache. Set CSS classes' defenition in main(index) file, use classes on part of page, where You need. – Egor Sazanovich Jan 05 '12 at 07:25
  • @EgorSazanovich The index file & the display.php are two different files. display.php is not included using php include. Instead it is inserted into chatbox div by jQuery. So the stylesheet of the index page will not apply to display page. Right? I thought that it is \ the browser which loads images. So I created a div on index page containing all the images of the emoticons. So, they can be cached before being used in display. But the same problem remained. Surprisingly, it works on IE & Safari. There is no blink. But it blinks on Google Chrome usually. – P.C. Jan 06 '12 at 10:31
  • @PrernaChikersal `So the stylesheet of the index page will not apply to display page. Right?` Nope, they will. On page's load browser caches every style in css and loads images to self cache to provide fast serfing through the page. If You call image request, browser will try to load it from cache(in some case), then server. CSS caching is deeper, it will not even to try update images from CSS if css-file not changed. – Egor Sazanovich Jan 06 '12 at 11:28