Defer spoiler html parsing until toggled

[Luke F]

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

 

[cclaerhout]

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.

 

[cclaerhout]

Even simpler:

In the container function:

  $(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 :

          $e.find('img').each(function(){
             var $img = $(this);
             if($img.data('src')){
               $img.attr('src', $img.data('src'))
               $img.data('src', '')
             }
           });

 

[Luke F]

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

 

[cclaerhout]

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

If most are iframe, then they will also have the src attribute, so same code than above but with

.find('img, iframe')

I like your idea, it make pages loading faster.

 

[cclaerhout]

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

 

[cclaerhout]

  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.