profile pictures blocked

Hello,

Could you please help me with the following problem:

I have added the following code to index.php to get a "loading" picture to show as elgg is loading:

<head>
<link rel="stylesheet" href="loading.css" />
<script src="loading.js"></script>
 
</head>
 
<body>
<div class="se-pre-con"></div>
</body>

The code works correctly, and the loading image is showing while it loads, and it fades over into the elgg site.

But, the elgg site will no longer load the profile images, and the thumbnails. The outer border is also white making it look like the site is in an iframe. All other things load and function correctly.

What could be causing this? How could that code block the retrieval of the images from the data folder and cache? 

  • When I remove the code, it continues to have the problem. It is only fixed when I upload a new index.php overwriting the old one. It's as if the file is not saving correctly, or saving with corruption in it.

  • I tried putting the code in a different file and calling it with the line: require_once __DIR__ . '/loading.php'; . No difference, exactly the same.

  • I don't know if you can even add a header section in index.php. As Elgg would add a header section, too, this might clash.

    If you have issues even after removing any changes you made, you might save the files with "BOMs" (Byte Order Marks). These are invisible control characters causing trouble. Always save with UTF8 encoding without BOMs.

    Also, it might be a problem using the jquery version you fetch from google here. At least Elgg 2.x is very likely using (and requiring) a newer version of jquery and this might cause trouble, too.

    Is it even necessary to add some loading image? Elgg 2.x loads scripts asyncronous (which you contradict here) and therefore the pages should build up at least partly already quite fast anyway giving the user the indication that something does happen without letting them waiting without any feedback.

  • Hello,

    Thanks for your answer.

    The two headers dont seem to be clashing as they are both produced in the "view page source" in the browser, and all Elgg functions are working correctly. Its just the profile icons and the top menu bar icons that are missing, as well as the strange white border.

    I've adjusted the jquery link to the 3.3.1 version. Now elgg will not load at all and its stuck on the loading image.

    Unfortunately my elgg is very slow loading, up to 20 seconds to load, so I need the loading image to stop visitors giving up and leaving.

  • And no, it doesnt load gradually, showing the visitor that something is happening. It remains a blank white screen, for upto 20 seconds, until it loads.

  • If you are right about there being a clash, then I assume it is the javascript in the headers that is clashing. Here are the two:

    Javascript in the loading header:

    $(window).load(function() {
    // Animate loader off screen
    $('.se-pre-con').fadeOut('slow');;
    });
     
    Javascript in the Elgg header:
     
    <script>
    require = function () {
    // handled in the view "elgg.js"
    _require_queue.push(arguments);
    };
    _require_queue = [];
    </script>
  • I just changed $ to jQuery. No difference, its stuck on the loading image.

  • Right, I've got it back to loading elgg, by adjusting the script to:

    $(window).on('load', function() {
    // Animate loader off screen
    $('.se-pre-con').fadeOut('slow');
    });

    Now its back to where it was with the missing icons and white border.

  • I may be way off here, but would it have anything to do with the following line in .htaccess:

    <IfModule mod_headers.c>
    Header append Vary User-Agent env=!dont-vary
    </IfModule>
     
    ?
  • I'm afraid I can't give you any help with regards to the header or even how to implement a loading indication (or even how to NOT do it). I never had to modify the Elgg engine at this stage but could always do it with a plugin. But that might not help you here as the loader image most likely would show up to late to be of any use then if your site loads so slow. Best would be if a Elgg core developer would give some input here (sadly they seem too busy to follow every discussions currently and might not have noticed this thread yet...).

    If only the jquery version is causing the problem, you might want to try it with jquery 2.2.4 which is the version used by Elgg 2.3.7 (most likely earlier 2.3.x versions already, too). Though I don't know if it would still break stuff if you explicitely load it in the header. Elgg 2 loads JS stuff asyncronous as AMD modules just for the very reason for having to wait for libs to be fully loaded before page rendering can start. If you load jquery in the header and Elgg tries to load it also on its own it might be a problem.

    Have you tried yet to figure out why your site loads so slow and if there's any chance to improve the performance? That might be the better way to improve user experience and might make a loading indicator obsolete.

    If you not already have enabled the caching options in the advanced settings I would suggest to do so. You should also create the cache symlink if you haven't done so yet and it's possible to do so on your server.

    Next thing you might want to investigate (if not on a shared server) would be the mysql config settings. It can help a lot to lessen possible bottlenecks in the mysql config causing db queries taking much longer than necessary. You could investigate the mysql status variables (for example in phpMyAdmin) to see if some buffer sizes or other variables might be set to small. It's a rather complicated matter to find a good config though as the main limiting factor is the available RAM on the server (on the one hand you would want to use as much RAM as possible for the mysql server, on the other hand you would need some free RAM for sure for the http server and other processes for sure).

    Or you might want to investigate the performance of your 3rd party plugins. For example you can use the network analysis tools that should be part of every browsers' web development environment to find out what takes the most time on loading a page. Maybe you find out that something loaded by a 3rd party plugin holds up the page loading for most of the total time. Or you disable the 3rd party plugins (one or more at a time) temporarily to see if the loading goes much faster with one or the other 3rd party plugin disabled. If you could identify a plugin slowing down your site considerably, you could try to figure out why and maybe fix it. As I said, the recommended way of loading JS libs is via AMD modules now. But maybe some plugin does not do it this way yet (could be a plugin already written for Elgg 1 and not fully updated to make use of all the new stuff introduced later in Elgg). Or some plugin might load something from an external server (like you do with the jquery and modernizr libs for the loading image). It might be necessary to do so in some cases and sometimes it's supposed to be faster using some CDN service. But somethings it's just the other way round: it slows down everything instead.