Skip to main content

Is there a way to load different part of the pages at different time in php

Image
By User



I'm using php and javascript and what i want to do is to load the different sections of a web page at different time such that first my header and side slider loads up and then my middle content. And also, when user scrolls down then only the images loads up.




Labels:

Comments

  1. Tips For AllJanuary 17, 2012 at 1:25 AM

    You can use jQuery to asynchronously load contents to your page very easy.

    http://api.jquery.com/load/

    But you will not win performance on that, unless you have very big blocks of content you want to load in portions.

    ReplyDelete
  2. Tips For AllJanuary 17, 2012 at 1:25 AM

    I don't think that is the purpose of PHP... nor does it work like that.

    I wouldn't intentionally delay load time, so using jquery .load() just for the sake of a visual effect is bad practice. If you just want the visual effect of loading the parts at different times you can do the following:


    In the head, add the following script. I would add it right after or before your style sheets.




    var thehtml = document.getElementsByTagName('html')[0];
    thehtml.className = 'loading';

    function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
    }

    function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className=ele.className.replace(reg,' ');
    }
    }

    window.onload = function() {removeClass(thehtml, "loading")}



    Style the .loading class:




    .loading #header,
    .loading #sidebar {opacity: 0}

    #header,
    #sidebar {opacity: 1; transition: all 3s ease-in-out;}


    This will cause the header and sidebar to fade in once the loading class is removed. If your middle content consists of all images, you can use a "lazy loader" like lazy karl. http://www.karlsteltenpohl.com/blog/,56,

    In general I think all lazy load plugins are bad for performance as you have to rely on a scroll event, which means javascript runs a function every time the user scrolls the page.

    Additionally if you want to have more control over the timing and order of "loading" you can use setTimeout() inside of the window.load function to have the elements load at different times.

    If you choose this solution there will be alot more CSS involved and that will depend on your individual layout and how you've coded it.

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

By User
I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...
3 comments
Read more

Is it possible to have IF statement in an Echo statement in PHP

By User
Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.
5 comments
Read more