WordPress.org
Get WordPress

Plugin Directory

Changeset 2080571


Ignore:
Timestamp:
05/04/2019 06:09:49 PM (7 years ago)
Author:
nikitaglobal
Message:

v.1.2 supports background images

Location:
ng-lazyload
Files:
3 deleted
3 edited

Legend:

Unmodified
Added
Removed

  • ng-lazyload/trunk/NG-Lazyload.php

    r2079208 r2080571  
    55Description: Implements lazyload for thumbnails and content images
    66Author: Nikita Menshutin
    7 Version: 1.1
     7Version: 1.2
    88Author URI: http://nikita.global
    99
    … …  
    3737        {
    3838            $this->prefix = 'nglazyload';
    39             $this->version = '1.1';
     39            $this->version = '1.2';
    4040            add_action('wp_enqueue_scripts', array($this, 'scripts'));
    4141            add_filter(
    … …  
    4343                array(
    4444                    $this,
    45                     'filterContent',
     45                    'filterContentTags',
    4646                )
    4747            );
    … …  
    5555                3
    5656            );
    57             add_filter('the_content', array($this, 'filterContent'));
     57            add_filter('the_content', array($this, 'filterContentTags'));
     58            add_filter('the_content', array($this, 'filterContentBackgroundImages'));
    5859        }
    5960
    … …  
    7576
    7677        /**
     78         * Replacing all background images in styles with
     79         * lazy-load attributes
     80         *
     81         * @param string $content html content
     82         *
     83         * @return string updated images if any
     84         */
     85        public function filterContentBackgroundImages($content)
     86        {
     87            $match = '#<[^>]*background\-image[^url]*url[^(]*\(([^\)]*)\)[^>]*>#';
     88            return preg_replace_callback(
     89                $match,
     90                function ($matches) {
     91                    $newtag = $matches[0];
     92                    $url = $matches[1];
     93                    $newtag = str_replace($url, NGLL::dataImg(), $newtag);
     94                    $newtag = str_replace(
     95                        '>',
     96                        NGLL::dataAttrValue($url, true) .
     97                        '>',
     98                        $newtag
     99                    );
     100                    return $newtag;
     101                },
     102                $content
     103            );
     104        }
     105
     106        /**
    77107         * Replacing all images with
    78108         * lazy-load attributes
    … …  
    82112         * @return string updated images if any
    83113         */
    84         public function filterContent($content)
     114        public function filterContentTags($content)
    85115        {
    86116            $xmlprefix = '<?xml encoding="utf-8" ?>';
    … …  
    88118            $doc->loadHTML(
    89119                $xmlprefix . $content //,
    90                 //            LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD
     120                // LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD
    91121            );
    92122            $images = $doc->getElementsByTagName('img');
    … …  
    104134                    '',
    105135                    preg_replace(
    106                         '~<(?:!DOCTYPE|/?(?:html|head|body))[^>]*>\s*~i',
    107                         '',
     136                        '~<(?:!DOCTYPE|/?(?:html|head|body))[^>]*>\s*~i', 
     137                        '', 
    108138                        $doc->saveHTML()
    109139                    )
    … …  
    113143
    114144        /**
    115          * Engueue plugin.js
     145         * Enqueue plugin.js
    116146         *
    117147         * @return void
    … …  
    163193     * Generate data html tag attribute for real image
    164194     *
    165      * @param string $src string with link
     195     * @param string $src        string with link
     196     * @param bool   $background if tag for background image
    166197     *
    167198     * @return void
    168199     */
    169     public static function dataAttrValue($src)
    170     {
    171         return ' ' . self::dataAttr . '="' . $src . '" ';
     200    public static function dataAttrValue($src, $background = false)
     201    {
     202        $suffix = '';
     203        if ($background) {
     204            $suffix = 'b';
     205        }
     206        return ' ' . self::dataAttr() . $suffix . '="' . $src . '"';
    172207    }
    173208

  • ng-lazyload/trunk/plugin.js

    r2079194 r2080571  
    1 $(document).ready(function(){
     1$(document).ready(function () {
    22    nglazyLoad();
    33    setInterval(function () {
    … …  
    66    $(window).scroll(function () {
    77        nglazyLoad();
    8     });
    9     $(window).resize(function () {
    10         nglazyLoad();
    11     });
     8    });
     9    $(window).resize(function () {
     10        nglazyLoad();
     11    });
    1212});
    1313
    1414function nglazyLoad() {
     15    $('[data-ngll-srcB]').each(function () {
     16        if ($(this).isInViewport()) {
     17            $(this).css(
     18                'background-image', 'url(' + $(this).data('ngll-srcb') + ')'
     19            );
     20            $(this).removeAttr('data-ngll-srcB');
     21        }
     22    })
    1523    $('img[data-ngll-src]').each(function () {
    1624        if ($(this).isInViewport()) {

  • ng-lazyload/trunk/readme.txt

    r2079208 r2080571  
    33Plugin Name: NG-Lazyload
    44Tags: images, lazy load, lazyload, thumbnail, optimize content
    5 Plugin URI: https://perishablepress.com/press/2009/12/22/protect-wordpress-against-malicious-url-requests/
    6 Tags: wp, protect, php, eval, malicious, url
    75Author URI: https://nikita.global
    86Author: Nikita Menshutin
    … …  
    2422
    2523NG-Lazyload plugin replaces all the thumbails and images in the content with the smallest image possible (1 pixel gif) and then shows the full image only when it is in viewport.
     24The only plugin which also works with background images in style tag
    2625
    2726== Installation ==
    … …  
    3635== Changelog ==
    3736
     37= 1.2 (2019-05-04)
     38* Now modifies style tags which have background-images. Useful when you have sliders like slick or owl caroussel.
     39
    3840= 1.0 (2019-05-02) =
    3941* The First Upload, but was tested before at several sites
Note: See TracChangeset for help on using the changeset viewer.