1. Lazy Load vs DLE integration

Lazy Load vs DLE integration

  |   5
Lazy Load vs DLE integration

Lazy Load is a jQuery plugin written in javascript. It delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

For more information about Lazy Load jQuery Plugin, please visit project website at http://www.appelsiini.net/projects/lazyload

We have one of our V.I.P. members asking if we can make tutorial for LazyLoad jQuery integration, so after a few tests on our end, we found that Lazyload jQuery integration is easier than we thought, however, this integration requires your website articles to be rebuilt otherwise the change will not take effect, so here is in how we test and found that it's effective way to integrate this jQuery into any DLE versions.
Please follow the instruction very carefully and make sure you make full backup of your files and your database before you start this integration! We will not guarantee any success or fail of integration or any lost of data of your site, so it's very important to read each step and section carefully!

I know there are so many ways and easy way to integrate this plugin but we want to do it in the right way so it will load properly without any issues and without you have to worry about it when you want to change new themes and you don't have to keep adding the tags and code in theme header, so I decide to make it proper way for this jQuery plugin to be used in your site...

1) Easy Integration Method


1) Open /templates/your theme/main.tpl

Add this code before </body>
<script type="text/javascript" src="{THEME}/js/lazy-load.js"></script>
<script type="text/javascript">
$(function() {
$("img").lazyload({
placeholder : "{THEME}/dleimages/grey.gif",
effect: "fadeIn"
});
});
</script>

2) Download the attache file below and upload to /templates/your theme/ folder
Login Required!Only registered users can download files. Please register or Login

That's all, very easy and simple way without modify any script files or no need to rebuild your articles

If you choose to use this method above then there is no need for any integration below this point because all images will be using Lazy Load automatically!

Steps below this point will modify your script core files, if you use many modules to query images and use RSS Feed with images, DO NOT use the method below because it will cause your rss feed not display images

2) Integration Lazy Load for standard short/full story


The reason I call this "standard" because I will assume that you use {short-story} and {full-story} as standard tags for your theme, so this method will apply to all area within {short-story} and {full-story} when you add posts and articles.
  1. Download the latest version of Lazy Load from the project website at http://www.appelsiini.net/projects/lazyload, there are 2 versions of the plugin you can use
    - Full Source Code
    -Minified Source Code
  2. In this tutorial I will use minified version since it's compressed code and load faster, after you download and saved the js to your computer, upload the code to your server location /engine/classes/js/, so if you use full source code full version you will get like this
    /engine/classes/js/jquery.lazyload.js
    If you use minified version you will get
    /engine/classes/js/jquery.lazyload.min.js
  3. Open /engine/modules/functions.php and find:
    'engine/classes/js/dle_js.js',
    Add after:
    'engine/classes/js/jquery.lazyload.min.js',
    If you use full source code version please use
    'engine/classes/js/jquery.lazyload.js',
  4. Open /engine/classes/js/dle_js.js and add this code at the end of the file
    $(function() {$("img").lazyload({effect : "fadeIn"});});
  5. Open /engine/classes/parse.class.php Find:
    					if( $align == '' ) return "<!--dle_image_begin:{$info}--><a href=\"{$url}\" onclick=\"return hs.expand(this)\" ><img src=\"$url\" width=\"{$config['tag_img_width']}\" height=\"{$out_heigh}\" {$alt} /></a>{$caption}<!--dle_image_end-->";
    else return "<!--dle_image_begin:{$info}--><a href=\"{$url}\" onclick=\"return hs.expand(this)\" ><img src=\"$url\" width=\"{$config['tag_img_width']}\" height=\"{$out_heigh}\" style=\"float:{$align};\" {$alt} /></a>{$caption}<!--dle_image_end-->";
    Replace with:
    					if( $align == '' ) return "<!--dle_image_begin:{$info}--><a href=\"{$url}\" onclick=\"return hs.expand(this)\" ><img src=\"{THEME}/dleimages/grey.gif\" data-original=\"$url\" width=\"{$config['tag_img_width']}\" height=\"{$out_heigh}\" {$alt} /></a>{$caption}<!--dle_image_end-->";
    else return "<!--dle_image_begin:{$info}--><a href=\"{$url}\" onclick=\"return hs.expand(this)\" ><img src=\"{THEME}/dleimages/grey.gif\" data-original=\"$url\" width=\"{$config['tag_img_width']}\" height=\"{$out_heigh}\" style=\"float:{$align};\" {$alt} /></a>{$caption}<!--dle_image_end-->";
    Find:
    		if( $align == '' ) return "<!--dle_image_begin:{$info}--><img src=\"{$url}\" {$alt} /><!--dle_image_end-->";
    else return "<!--dle_image_begin:{$info}--><img src=\"{$url}\" style=\"float:{$align};\" {$alt} /><!--dle_image_end-->";
    Replace with:
    		if( $align == '' ) return "<!--dle_image_begin:{$info}--><img src=\"{THEME}/dleimages/grey.gif\" data-original=\"{$url}\" {$alt} /><!--dle_image_end-->";
    else return "<!--dle_image_begin:{$info}--><img src=\"{THEME}/dleimages/grey.gif\" data-original=\"{$url}\" style=\"float:{$align};\" {$alt} /><!--dle_image_end-->";
    Find:
    		if( $align == '' ) return "<!--TBegin:{$info}--><a href=\"$gurl\" onclick=\"return hs.expand(this)\" ><img src=\"$url\" {$alt} /></a>{$caption}<!--TEnd-->";
    else return "<!--TBegin:{$info}--><a href=\"$gurl\" onclick=\"return hs.expand(this)\" ><img src=\"$url\" style=\"float:{$align};\" {$alt} /></a>{$caption}<!--TEnd-->";
    Replace with:
    		if( $align == '' ) return "<!--TBegin:{$info}--><a href=\"$gurl\" onclick=\"return hs.expand(this)\" ><img src=\"{THEME}/dleimages/grey.gif\" data-original=\"$url\" {$alt} /></a>{$caption}<!--TEnd-->";
    else return "<!--TBegin:{$info}--><a href=\"$gurl\" onclick=\"return hs.expand(this)\" ><img src=\"{THEME}/dleimages/grey.gif\" data-original=\"$url\" style=\"float:{$align};\" {$alt} /></a>{$caption}<!--TEnd-->";
  6. Login to DLE Admin CP and rebuild the articles in your site http://yoursite.com/admin.php?mod=rebuild This step is very important, otherwise the parse class will not work
  7. While you are in Admin CP, clear smartcache from http://yoursite.com/admin.php?mod=main

3) Integrate Lazy Load in shortstory/fullstory if you use custom tag {image-x}


This integration is also important if you are using special custom image tags like {image-1}, {image-2} ...., if you don't integrate this then your image tags will only get {THEME}/dleimages/grey.gif because all images are now using
<img src=\"{THEME}/dleimages/grey.gif\" data-original=\"{$url}\"
in above section so all image tag will only search for src parse which will give you all {THEME}/dleimages/grey.gif, so it's important that you follow this step carefully so you will get correct images to display in your site
  1. Open /engine/modules/show.short.php and Find:
    				preg_match_all('/(img|src)=("|\')[^"\'>]+/i', $row['short_story'], $media);
    $data=preg_replace('/(img|src)("|\'|="|=\')(.*)/i',"$3",$media[0]);

    Replace with:
    				preg_match_all('/(img|data-original)=("|\')[^"\'>]+/i', $row['short_story'], $media);
    $data=preg_replace('/(img|data-original)("|\'|="|=\')(.*)/i',"$3",$media[0]);
  2. Open /engine/modules/show.full.php Find:
    			preg_match_all('/(img|src)=("|\')[^"\'>]+/i', $row['short_story'], $media);
    $data=preg_replace('/(img|src)("|\'|="|=\')(.*)/i',"$3",$media[0]);
    Replace with:
    			preg_match_all('/(img|data-original)=("|\')[^"\'>]+/i', $row['short_story'], $media);
    $data=preg_replace('/(img|data-original)("|\'|="|=\')(.*)/i',"$3",$media[0]);
  3. In {YOUR-THEME}/shortstory.tpl/fullstory.tpl theme file, replace
    src="{image-1}"
    src="{image-2}"
    src="{image-3}"
    etc...
    with:
    src="{THEME}/dleimages/grey.gif" data-original="{image-1}"
    src="{THEME}/dleimages/grey.gif" data-original="{image-2}"
    src="{THEME}/dleimages/grey.gif" data-original="{image-3}"
    etc...

4) Integrate Lazy Load in topnews and relatednews if you use custom image tag {image-x}


This integration is also important if you are using special custom image tags like {image-1}, {image-2} ...., if you don't integrate this then your image tags will only get {THEME}/dleimages/grey.gif because all images are now using
<img src=\"{THEME}/dleimages/grey.gif\" data-original=\"{$url}\"
in above section so all images tag will only search for src parse which will give you all {THEME}/dleimages/grey.gif, so it's important that you follow this step carefully so you will get correct images to display in your topnews and relatednews for example if you are using themes like dlelight, MStater, EStarter etc..

For Top News
  1. Open /engine/modules/topnews.php Find:
    			preg_match_all('/(img|src)=("|\')[^"\'>]+/i', $row['short_story'], $media);
    $data=preg_replace('/(img|src)("|\'|="|=\')(.*)/i',"$3",$media[0]);
    Replace with:
    			preg_match_all('/(img|data-original)=("|\')[^"\'>]+/i', $row['short_story'], $media);
    $data=preg_replace('/(img|data-original)("|\'|="|=\')(.*)/i',"$3",$media[0]);
  2. In your {YOUR-THEME}/topnews.tpl theme file, replace
    src="{image-1}"
    src="{image-2}"
    src="{image-3}"
    etc...
    with:
    src="{THEME}/dleimages/grey.gif" data-original="{image-1}"
    src="{THEME}/dleimages/grey.gif" data-original="{image-2}"
    src="{THEME}/dleimages/grey.gif" data-original="{image-3}"
    etc...


For Related News
  1. Open /engine/modules/show.full.php and Find:
    				preg_match_all('/(img|src)=("|\')[^"\'>]+/i', $related['short_story'], $media);
    $data=preg_replace('/(img|src)("|\'|="|=\')(.*)/i',"$3",$media[0]);

    Replace with:
    				preg_match_all('/(img|data-original)=("|\')[^"\'>]+/i', $related['short_story'], $media);
    $data=preg_replace('/(img|data-original)("|\'|="|=\')(.*)/i',"$3",$media[0]);
  2. In your {YOUR-THEME}/relatednews.tpl theme file, replace
    src="{image-1}"
    src="{image-2}"
    src="{image-3}"
    etc...
    with:
    src="{THEME}/dleimages/grey.gif" data-original="{image-1}"
    src="{THEME}/dleimages/grey.gif" data-original="{image-2}"
    src="{THEME}/dleimages/grey.gif" data-original="{image-3}"
    etc...


5) Integrate Lazy Load in custom page


In some cases if you are using tag {custom} in your website, you need to integrate Lazy Load jQuery Plugin to the module too otherwise you won't be able to see correct images for example if you are using themes like dlelight, MStater, EStarter etc.., to integrate Lazy Load simply follow steps below
  1. Open /engine/modules/show.custom.php and find:
    		preg_match_all('/(img|src)=("|\')[^"\'>]+/i', $row['short_story'], $media);
    $data=preg_replace('/(img|src)("|\'|="|=\')(.*)/i',"$3",$media[0]);
    Replace with:
    		preg_match_all('/(img|data-original)=("|\')[^"\'>]+/i', $row['short_story'], $media);
    $data=preg_replace('/(img|data-original)("|\'|="|=\')(.*)/i',"$3",$media[0]);
  2. In custom page theme you use for displaying the custom page replace
    src="{image-1}"
    src="{image-2}"
    src="{image-3}"
    etc...
    with:
    src="{THEME}/dleimages/grey.gif" data-original="{image-1}"
    src="{THEME}/dleimages/grey.gif" data-original="{image-2}"
    src="{THEME}/dleimages/grey.gif" data-original="{image-3}"
    etc...

Integrate Lazy Load with xfield images


In some themes using xfield for images, like MStarter, EStarter themes or any themes that using xfield, if you want to use Lazy Load in those xfields, you can do that with very simple way by replace:
src="[xfvalue_name]"
with:
src="{THEME}/dleimages/grey.gif" data-original="[xfvalue_name]"
The example for MStarter theme in shortstory.tpl

Replace:
<img src="[xfvalue_poster]" width="110" height="150" alt="Watch Movie {title}" title="Watch Movie {title}" />
With:
<img src="{THEME}/dleimages/grey.gif" data-original="[xfvalue_poster]" width="110" height="150" alt="Watch Movie {title}" title="Watch Movie {title}" />

The last step is to upload image "grey.gif" into your theme folder {YOUR-THEME}/dleimages/, the image is very small, you can create your own 1 px image and save as grey.gif

Or download it from here http://docs.dlestarter.com/img/grey.gif

Please report if you have any problems because I didn't test all functions...
- This plugin will only work if you enable jQuery and disable JS compression in DLE admin CP, otherwise don't use this plugin!
- If you are using DLE 8.x which don't have jQuery library, you must add jQuery library in your theme and manually add jQuery function in your theme instead of add it in functions.php
- This plugin will cause the issue in RSS feed for image not showing...use it with your own risk, recommend use "Simple - only text, without formatting" setting in RSS Export Settings!!!
- If you have any issues then use method #1 for easy way without problem...

For this tutorial, I would like to thank "Noobos" for forwarding this useful plugin request to me so we can share with our members, Also would like to thank you our V.I.P. member "ivanov16" for suggest the plugin and request tutorial...

If you have any things in your mind which is open source and would like us to write tutorial please suggest them, if we can write tutorial and test it then we will post tutorial to share with you...
Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.

Details

+16

Comments 5

noobos
noobos
DLE TEAM
Commented By noobos on January 27, 2013 (12:22 am)
man, you are amazing tutorial writer...we are so lucky to have you with us...we miss i386 for this kind of tutorials, now we have you...tutorial is worth waiting for! thank you bro!
16 302Forum topics : 12Forum replies : 1036Forum likes : 170
ivanov16
ivanov16
V.I.P.
Commented By ivanov16 on January 27, 2013 (1:28 am)
Thanks spamhater, noobos :)
N/A 60Forum topics : 27Forum replies : 106Forum likes : 1
ContactUs
ContactUs
V.I.P.
Commented By ContactUs on February 11, 2013 (1:49 pm)
Hey mate just now suddenly my lazy load effect stop working and all images are showing grey now... any idea..?????

Edit : solved it was a conflict btw 2 jquery scripts...
N/A 11Forum topics : 14Forum replies : 46Forum likes : 0
ContactUs
ContactUs
V.I.P.
Commented By ContactUs on February 12, 2013 (4:58 am)
A Little problem with lazy load that images in rss feeds are not showing, is there is any fix for that???
N/A 11Forum topics : 14Forum replies : 46Forum likes : 0
dark73
dark73
Members
Commented By dark73 on May 11, 2014 (4:17 pm)
thanks good job :)
N/A 4Forum topics : 1Forum replies : 3Forum likes : 0
Information!Would you like to leave your comment? Please Login to your account to leave comments. Don't have an account? You can create a free account now.
DLEStarter Notice!Please note...Every hack and every module will get additional queries from your database and some hacks and some modules may result your server overload, so install only what you "need", remove any hacks and modules from your script when you don't need them, all hacks and modules appears in this website are not guaranteed by DLEStarter Team for your script security and compatibility, please read instruction carefully and use hacks and modules at your own risk...Thank you.