[CDN] Enhancement Request for 'Lazy Loader' Slide Show Images

[GoogleCodeExporter]

There are a growing number of enhanced 'lazy loader' slide show functions / 
modules around that use different 'tags' for images.

Example:

Here is a live html source source snapshot of a live site using a 
'pe_estro_slider' module.

<div class="slideouter">
<div id="pe_estro_slider_1" class="peKenBurns default" 
  data-autopause="image" 
  data-controls="disabled" 
  data-logo="disabled" 
  data-logo-target="_self" 
  data-logo-link="" 
  data-shadow="disabled" 
  data-thumb="disabled" 
  data-mode="kb" 
  style="width: 958px; height: 340px;">
  <div data-align="bottom,left" 
    data-delay="12" 
    data-thumb="http://www.covenantfamilychurch.com.au/wp-content/uploads/2012/05/cfc-billy-preacher-240x160.jpg" 
    data-duration="15" 
    data-pan="top,right" 
    data-transition="swipe" 
    data-zoom="out">
    <img src="//small.gdlcdn.com/802C5F/cfc1/wp-content/plugins/pe_estro_slider/resources/img/blank.png" 
    data-src="http://www.covenantfamilychurch.com.au/wp-content/uploads/2012/05/cfc-billy-preacher.jpg" />
    <h1>'Your love has given me great joy and encouragement, because you, brother, have refreshed the hearts of the Lord’s people.'  Philemon 1:7</h1>
  </div>

The 'image parts' that web-optimizator needs to re-write for CDN support are:

1) 
data-src="http://www.covenantfamilychurch.com.au/wp-content/uploads/2012/05/cfc-
billy-preacher.jpg" />

2) 
data-thumb="http://www.covenantfamilychurch.com.au/wp-content/uploads/2012/05/cf
c-billy-preacher-240x160.jpg"

I have added a small function to the 'webo' compressor.php to do this, but I 
would prefer that your own released code does handle this! Your code team know 
the code better than I...

Notes: The 'lazy loader' uses client side JavaScript [unobtrusive method] to 
rewrite the current slide image (in the DOM).

The keywords being the tags: 'data-src='

Thanks,
Peter

Original issue reported on code.google.com by peterbowey on 28 May 2012 at 4:13

[GoogleCodeExporter]

Notes for above:

You can see that web-optimizator correctly changes the following line [for CDN 
assets]:

<img 
src="//small.gdlcdn.com/802C5F/cfc1/wp-content/plugins/pe_estro_slider/resources
/img/blank.png"

Where: //small.gdlcdn.com/802C5F/cfc1/ is the CDN URL path

Original comment by peterbowey on 28 May 2012 at 4:17

[GoogleCodeExporter]

If it helps, here is a live link of a demo site using the “Estro” a jQuery 
slider plugin by pixelentity:

http://codecanyon.net/item/estro-jquery-ken-burns-swipe-effect-slider/full_scree
n_preview/235111

This jQuery plugin uses unobstrusive javascript to transform a block of simple 
HTML markup into a georgous elegant slider, which can be completely customized 
using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with 
all content always being available to search engines. When using this plugin, 
your page layout will be consistent even if javascript has been disabled.

Original comment by peterbowey on 28 May 2012 at 4:20

[GoogleCodeExporter]

data-thumb, data-src are not standartized attributes for anything. So there 
must be an option inside the product - which fields must be parsed.
Also this parsing mechanic is used not only for CDN, but also for HTML Sprites. 
And also string operations are supported (which are faster sometimes). So this 
improvement is not trivial.

Original comment by sunny.dr...@gmail.com on 28 May 2012 at 7:51

• Changed title: [CDN] Enhancement Request for 'Lazy Loader' Slide Show Images
• Changed state: Accepted
• Added labels: Component-Logic, Priority-Low, Type-Enhancement
• Removed labels: Priority-Medium, Type-Defect

[GoogleCodeExporter]

Notes: There are no option's inside the 'lazy loader slideshow product' - which 
fields are parsed.

As you noted, their approach is 'non-standard' - for the moment.

Original comment by peterbowey on 28 May 2012 at 8:02

[GoogleCodeExporter]

I mean - inside WEBO Site SpeedUp product, not Lazy loader

Original comment by sunny.dr...@gmail.com on 28 May 2012 at 9:08

[GoogleCodeExporter]

Peter, there has been a new option added - Regular Expression - to CDN options. 
Now such arguments can be parsed with regexp like the following
<(img|input|div)[^>]+(data-src|src|data-thumb)[^>]+>

But the main issue here is that IMG tag can't be parsed twice (one - for src, 
and another - for data-src argument). Do you have any ideas how to handle this?

Original comment by sunny.dr...@gmail.com on 29 May 2012 at 5:56

[GoogleCodeExporter]

Sunny thanks,

Well done on the new 'reg.exp' options!
+10 points on your timely motivation!

I will test some code on method's to prevent multiple tag handling.

Original comment by peterbowey on 29 May 2012 at 8:34

[GoogleCodeExporter]

So closing this issue until we find more elegant solution

Original comment by sunny.dr...@gmail.com on 29 May 2012 at 6:52

• Changed state: Fixed