Page Speed Optimization Libraries  1.13.35.1
 All Classes Namespaces Files Functions Variables Typedefs Enumerations Enumerator Friends Macros Pages
Classes | Namespaces
delay_images_filter.h File Reference
#include "net/instaweb/rewriter/public/common_filter.h"
#include "net/instaweb/rewriter/public/rewrite_driver.h"
#include "pagespeed/kernel/base/basictypes.h"
#include "pagespeed/kernel/base/string.h"
#include "pagespeed/kernel/base/string_util.h"
#include "pagespeed/kernel/html/html_element.h"
#include "pagespeed/kernel/html/html_filter.h"

Go to the source code of this file.

Classes

class  net_instaweb::DelayImagesFilter
 

Namespaces

 net_instaweb
 Unit-test framework for wget fetcher.
 

Detailed Description

Contains implementation of DelayImagesFilter, which delays all the high quality images whose low quality inlined data url are available within their respective image tag like

.

This filter extracts such low res data urls and generates a map from them. This map will be embedded inside HTML at the end of body tag with a script whose function is to put low res src into respective image tag. Another script which replaces low quality images with high quality images is also embedded.

This filter will work in conjunction with image_rewrite_filter which generates data url for low quality images and embeds them with their respective img tags.

To avoid drastic reflows, we also need to switch on insert_image_dimensions.

Html input to this filter looks like: <html> <head> </head> <body>

</body> </html>

Above input html input looks like this because the image_rewrite_filter has already replaced

with

.

Output for the above html will be: <html> <head> <script> Script code registers an onload event handler which replaces low res images with high res images. </script> </head> <body> <script> This block contains a map from url to their respective data urls and script which put these inline_src to their respective img tags. </script> </body> </html>

Bottom-of-page script actually includes the image data for the low-resolution images, and those are put in place as soon as control reaches there. High quality images are downloaded after all the low quality images are placed by delay script.