CODEWITHSUNDEEP
jquery
JackRoster
JackRoster

Reputation: 1663

Jquery Lazy Loading not working properly

I'm trying to implement a jQuery technique called lazy loading . The goal I'm trying to achieve is I want the page to load without waiting for all the images request so , I want the page to load first with CSS, etc., and let the images load slowly.

The issue I'm facing here is, it waits for all the image requests before the page is loaded which is the opposite of the concept of lazy loading. Can someone help me?

<html>
    <head>
        <link rel="stylesheet" href="css/float.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
        <script src="https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js" type="text/javascript"></script>
        <script>
            <script type="text/javascript">
                jQuery(document).ready(function($) {
                    $(function(){
                        $("img.lazy").lazyload();
                    });
                });
            </script>
    </head>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://wannabeyummymummie.files.wordpress.com/2013/01/beach.jpg?w=300&h=187" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8349/8225268620_4e00a8f603_m.jpg" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8338/8224516167_bc7a5f6699_m.jpg" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8199/8219175940_effa3f66ca_m.jpg" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8490/8215600456_de252d155d_m.jpg" width="400" height ="400"/>
<br>

Upvotes: 0

Views: 30022

Answers (3)

Barmar
Barmar

Reputation: 780974

You're not using the plugin properly. Read the documentation, you're supposed to put the URL of the image in the data-original attribute. The src attribute should contain the URL of a dummy image that's used for all the items until they load the real image.

<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://wannabeyummymummie.files.wordpress.com/2013/01/beach.jpg?w=300&h=187" width="400" height ="400"/>

Also, as the other answers pointed out, you need to call the plugin from the document ready handler.

jQuery(document).ready(function ($) {
    $("img.lazy").lazyload(
        { data_attribute: "orig" 
        });
});

The data_attribute option tells the plugin what data-XXX attribute to find the real URL in. It defaults to data-original, the above option changes it to data-orig to match the mistaken HTML I gave you.

FIDDLE

Upvotes: 12

PSL
PSL

Reputation: 123739

Place your script under document.ready. SO that your $("img.lazy") is executed after the document is loaded and just when the image tags are available in DOM.

$(function(){
   $("img.lazy").lazyload();
});

easiest way you can find this out is place an alert or console.log just before $("img.lazy").lazyload(); i.e

<script>
console.log($("img.lazy").length); // this will log 0
 $("img.lazy").lazyload();
 </script>

Upvotes: 1

Fallexe
Fallexe

Reputation: 596

Wrap your script in the onload function so that it does not execute until the page is loaded. 

$(function() {
    $("img.lazy").lazyload();
});

Upvotes: 2

Related Questions