Lazy Image dose not work

Reply

hordad

Member

5 Points

45 Posts

Lazy Image dose not work

Jan 22, 2015 04:08 AM|hordad|LINK

hi

i did like below :

_Layout:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.lazyload.js" type="text/javascript"></script>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>

View :

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<img class="lazy" data-src="Content/70x70/70.jpg" src="~/Content/800x368/6-800x368.jpg" border="0" alt="Lazy Image" width="800" height="368" />
<script type="text/javascript">
    $(document).ready(function () {
        $("img")
           .lazyload({
               event: "lazyload",
               effect: "fadeIn",
               effectspeed: 2000
           })
           .trigger("lazyload");
    });
</script>

i just see 6-800x368.jpg in browser and lazy image dose not occur.

Reply

Nasser Malik

Star

13390 Points

2747 Posts

Re: Lazy Image dose not work

Jan 22, 2015 04:30 AM|Nasser Malik|LINK

Use following plugin

http://www.appelsiini.net/projects/lazyload

and code it like

$("img.lazy").lazyload({
    effect : "fadeIn"
});

and

<img class="lazy" data-original="img/example.jpg" width="765" height="574">

See demo here

Please Mark as Answer if find helpful -- Nasser --
Skype: maleknasser1
LinkedIn: https://www.linkedin.com/in/maliknasser

Reply

hordad

Member

5 Points

45 Posts

Re: Lazy Image dose not work

Jan 22, 2015 05:21 AM|hordad|LINK

Nasser Malik

Use following plugin

http://www.appelsiini.net/projects/lazyload

and code it like
$("img.lazy").lazyload({
    effect : "fadeIn"
});
and
<img class="lazy" data-original="img/example.jpg" width="765" height="574">
See demo here

where i can download this plugin from that URL ? where is it's download link.

and i changed my code but result did not change .

below dose not show any thing :

<img class="lazy" data-original="/Content/6-800x368.jpg" width="800" height="368">

and below just show 6-800x368.jpg

<img class="lazy" data-src="/Content/70.jpg" src="~/Content/6-800x368.jpg" border="0" alt="Lazy Image" width="800" height="368" />

and script :

<script type="text/javascript">
    $("img.lazy").lazyload({
        effect: "fadeIn"
    });
</script>

Reply

Nasser Malik

Star

13390 Points

2747 Posts

Re: Lazy Image dose not work

Jan 22, 2015 06:08 AM|Nasser Malik|LINK

Big Download link is at the bottom of the site

https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

You can try following working sample

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <%--<script src="Scripts/jquery-1.10.2.js"></script>--%>
    <%--<script src="Scripts/jquery-1.10.2.intellisense.js"></script>--%>
    <script type="text/javascript"  src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script type="text/javascript"  src="https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.js"></script> 
    <script type="text/javascript">
        $(function () {
            $("img.lazy").lazyload({
                effect: "fadeIn"
            });
        });
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <img class="lazy" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_hood.jpg" width="765" height="574" />
            <img class="lazy" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_side.jpg" width="765" height="574" />
            <img class="lazy" data-original="http://www.appelsiini.net/projects/lazyload/img/viper_1.jpg" width="765" height="574" />
            
        </div>
    </form>
</body>
</html>

Please Mark as Answer if find helpful -- Nasser --
Skype: maleknasser1
LinkedIn: https://www.linkedin.com/in/maliknasser

Reply

Zhi Lv - MSF...

All-Star

44726 Points

6713 Posts

Microsoft

Re: Lazy Image dose not work

Jan 23, 2015 02:08 AM|Zhi Lv - MSFT|LINK

Hi hordad,

As for the JQuery Lazy plugin, you could download from here.

http://plugins.jquery.com/lazy/

Here also some demos and tutorials you could refer to it.

http://jquery.eisbehr.de/lazy/

Best Regards,
Dillion

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Lazy Image dose not work [Answered]RSS

4 replies

Shortcuts

Lazy Image dose not work

Re: Lazy Image dose not work

Re: Lazy Image dose not work

Nasser Malik

Re: Lazy Image dose not work

Re: Lazy Image dose not work