12 Replies - 936 Views - Last Post: 24 August 2013 - 03:26 AM

#1 Bent al-Yemen  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 106
  • Joined: 30-December 09

lazy load problem

Posted 08 August 2013 - 09:04 AM

Hello,

I am trying to apply the lazy load function to my code

http://www.appelsiin...ojects/lazyload

but I can not get it working, this is my code.
<!DOCTYPE HTML>
<html>
   <head>
		
         <script src="jquery.js" type="text/javascript"></script>
        <script src="jquery.lazyload.js" type="text/javascript"></script>
       
        <script>
             	
			function lazyload()
			{
			$("img.lazy").lazyload({
			effect: "fadeIn"
			});
			
			}
			</script>     
			      
      <TITLE>My first HTML document</TITLE>
			
			
		</head>
		<body>

<div class="fram">
<img class="lazy"  data-original="../img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg" width="500" height="333" alt="interior shot #1"/>
</div>

<div class="fram">
<img class="lazy"  data-original="../img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg" width="500" height="333" alt="interior shot #1"/>
</div>


<div class="fram">
<img class="lazy"  data-original="../img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg" width="500" height="333" alt="interior shot #1"/>
</div>


<div class="fram">
<img class="lazy" data-original="../img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg" width="500" height="333" alt="interior shot #1"/>
</div>



<div class="fram">
<img class="lazy"  data-original="../img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg" width="500" height="333" alt="interior shot #1"/>
</div>



<div class="fram">
<img class="lazy" data-original="../img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg" width="500" height="333" alt="interior shot #1"/>
</div>

<div class="fram">
<img class="lazy"  data-original="../img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg" width="500" height="333" alt="interior shot #1"/>
</div>


<div class="fram">
<img class="lazy" data-original="../img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg" width="500" height="333" alt="interior shot #1"/>
</div>




     </body>
</html>

       

       


I do not know what is wrong with the code. It is only showing the gray pic. I am includeing only this file here

https://raw.github.c...ery.lazyload.js

This post has been edited by Bent al-Yemen: 08 August 2013 - 10:28 AM


Is This A Good Question/Topic? 0
  • +

Replies To: lazy load problem

#2 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 422
  • View blog
  • Posts: 1,798
  • Joined: 30-April 10

Re: lazy load problem

Posted 08 August 2013 - 09:12 AM

This code is missing a quote
<img class="lazy" src="../img/gray-really-dark.jpg data-original="../img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg" width="500" height="333" alt="interior shot #1"/>


Added here
<img class="lazy" src="../img/gray-really-dark.jpg" data-original="../img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg" width="500" height="333" alt="interior shot #1"/>


Was This Post Helpful? 0
  • +
  • -

#3 Bent al-Yemen  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 106
  • Joined: 30-December 09

Re: lazy load problem

Posted 08 August 2013 - 09:21 AM

the quots is not the problem
Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 422
  • View blog
  • Posts: 1,798
  • Joined: 30-April 10

Re: lazy load problem

Posted 08 August 2013 - 09:25 AM

This has a semi-colon and the first carrot in the end tag is missing:
<script type="text/javascript" src="http;//code.jquery.com/jquery-latest.js"/script>


Instead of a colon:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"</script>

Was This Post Helpful? 0
  • +
  • -

#5 Bent al-Yemen  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 106
  • Joined: 30-December 09

Re: lazy load problem

Posted 08 August 2013 - 09:38 AM

that was a typing mistake that i just made, the problem still there :)/>
Was This Post Helpful? 0
  • +
  • -

#6 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 422
  • View blog
  • Posts: 1,798
  • Joined: 30-April 10

Re: lazy load problem

Posted 08 August 2013 - 09:59 AM

The only thing I see now is that you are not adding a src attribute to your images for initial loading. I don't see anything else that may be causing this.
Was This Post Helpful? 0
  • +
  • -

#7 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 422
  • View blog
  • Posts: 1,798
  • Joined: 30-April 10

Re: lazy load problem

Posted 08 August 2013 - 10:05 AM

Warning :offtopic:

I also want to ask why you are using HTML 4 DOCTYPE still? This is for my own curiosity.

This post has been edited by laytonsdad: 08 August 2013 - 10:06 AM

Was This Post Helpful? 0
  • +
  • -

#8 Bent al-Yemen  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 106
  • Joined: 30-December 09

Re: lazy load problem

Posted 08 August 2013 - 10:06 AM

The source pic is not important, as described in the link in the post above. It makes no big difference
Was This Post Helpful? 0
  • +
  • -

#9 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 422
  • View blog
  • Posts: 1,798
  • Joined: 30-April 10

Re: lazy load problem

Posted 08 August 2013 - 10:08 AM

You need to fix your links they are both broken.
Was This Post Helpful? 0
  • +
  • -

#10 Bent al-Yemen  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 106
  • Joined: 30-December 09

Re: lazy load problem

Posted 08 August 2013 - 10:21 AM

the link is working now
Was This Post Helpful? 0
  • +
  • -

#11 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 422
  • View blog
  • Posts: 1,798
  • Joined: 30-April 10

Re: lazy load problem

Posted 08 August 2013 - 11:02 AM

I noticed your data-original="../img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg" has spaces in it you will need to use %20 in place of the spaces

This post has been edited by laytonsdad: 08 August 2013 - 09:36 PM
Reason for edit:: Spelling

Was This Post Helpful? 0
  • +
  • -

#12 Bent al-Yemen  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 106
  • Joined: 30-December 09

Re: lazy load problem

Posted 08 August 2013 - 11:04 AM

No, this is not the problem. The picture appeares when I use the src instead of data-original
Was This Post Helpful? 0
  • +
  • -

#13 Bent al-Yemen  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 106
  • Joined: 30-December 09

Re: lazy load problem

Posted 24 August 2013 - 03:26 AM

That was an old post, the only problem was that I had to put the script in the body not in the headr.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1