1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Defer spoiler html parsing until toggled

Discussion in 'XenForo Suggestions' started by Luke F, Jan 22, 2014.

  1. Luke F

    Luke F Well-Known Member

    A reasonably common usage of spoiler tags is to make image-heavy posts/threads more accessible. However in the current XF implementation, images within spoiler tags are still loaded in the background.

    It would be nice if spoiler html could be moved to a data attribute or similar and inserted into the dom on first toggle

    I've implemented spoilers in this way on my forum without much bother, though it does make the issues mentioned here trickier to fix
     
    RoldanLT, DJ XtAzY, Liam W and 8 others like this.
  2. cclaerhout

    cclaerhout Well-Known Member

    May be its the img tag which should be modified. If the img tag has a spoiler parent, then the src can target to a blank img and put the real src of the img as a data-src. Once the spoiler is toggled the first time it should be possible to play with the dom and load the images.
     
  3. cclaerhout

    cclaerhout Well-Known Member

    Even simpler:

    In the container function:
    Code:
      $(function() {
         $('.AdvSpoilerbbCommand').find('img').each(function(){
           var $this = $(this);
           $this.data('src', $this.attr('src')).attr('src', XenForo._baseUrl+'styles/default/xenforo/clear.png');
         });
       });
    
    Then in the spoiler click event :
    Code:
              $e.find('img').each(function(){
                 var $img = $(this);
                 if($img.data('src')){
                   $img.attr('src', $img.data('src'))
                   $img.data('src', '')
                 }
               });
    
     
  4. Luke F

    Luke F Well-Known Member

    It'd be nice to have it work for youtube videos and other embeds too though
     
  5. cclaerhout

    cclaerhout Well-Known Member

    If most are iframe, then they will also have the src attribute, so same code than above but with
    Code:
    .find('img, iframe')
    :)
    I like your idea, it make pages loading faster.
     
  6. cclaerhout

    cclaerhout Well-Known Member

    Tested on a live board: the above code (first function) doesn't work, which means the modification mustbe done directly from php.
     
  7. cclaerhout

    cclaerhout Well-Known Member

    PHP:

      
    public static function parseTagSpoilerbb(&$content, array &$options, &$templateName, &$fallBack, array $rendererStates$parentClass)
       {
         
    $xenOptions XenForo_Application::get('options');
         
    $visitor XenForo_Visitor::getInstance();

         
    $content preg_replace_callback(
           
    '#<(img|iframe)[^>]+?>#ui',
           array(
    'Sedo_AdvBBcodeBar_BbCode_Formatter_AdvBbCodes''_filterSpoilerBb'),
           
    $content
         
    );
       }
       
       protected static function 
    _filterSpoilerBb($match)
       {
         
    $tag $match[1];
         
    $line $match[0];
         
    $noscript "<noscript>{$line}</noscript>";
         
         if(
    preg_match('#class="(.*?)"#'$line$getClass))
         {
           
    $classes explode(' '$getClass[1]);
           if(!
    in_array('JsOnly'$classes))
           {
             
    $line str_replace('class="''class="JsOnly '$line);
           }
         }
         else
         {
           
    $line str_replace('<'.$tag'<'.$tag.' class="JsOnly"'$line);
         }
         
         
    $search '#src="(.*?)"#ui';
         
    $replace 'src="styles/default/xenforo/clear.png" data-spoiler-src="$1"';

         
    $line preg_replace($search$replace$line);
         
    $line .= $noscript;

         return 
    $line;
       }
    That's better.
     

Share This Page