Last post Jan 23, 2015 02:08 AM by Zhi Lv - MSFT
Member
5 Points
45 Posts
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.
Star
13390 Points
2747 Posts
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
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>
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>
All-Star
44726 Points
6713 Posts
Microsoft
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
Member
5 Points
45 Posts
Lazy Image dose not work
Jan 22, 2015 04:08 AM|hordad|LINK
hi
i did like below :
_Layout:
View :
i just see 6-800x368.jpg in browser and lazy image dose not occur.
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
and
See demo here
Skype: maleknasser1
LinkedIn: https://www.linkedin.com/in/maliknasser
Member
5 Points
45 Posts
Re: Lazy Image dose not work
Jan 22, 2015 05:21 AM|hordad|LINK
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 :
and below just show 6-800x368.jpg
and script :
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
Skype: maleknasser1
LinkedIn: https://www.linkedin.com/in/maliknasser
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
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.