コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
$(function () {
$('img.lazyload').lazyload({
effect: 'fadeIn',
effectspeed: 3000,
threshold: 300
});
});
<%@ Page Title="" Language="vb" AutoEventWireup="false" EnableTheming="False" MasterPageFile="~/Master/Base.Master" CodeBehind="TestPage.aspx.vb" Inherits="AspNetTest.TestPage" %>
<%@ Import Namespace="BaseLibrary.Library" %>
<asp:Content ID="header" ContentPlaceHolderID="cph_header" runat="server">
</asp:Content>
<asp:Content ID="body" ContentPlaceHolderID="cph_body" runat="server">
<img id="imgTest01" class="lazyload"
src='<%=Me.ResolveUrl("~/App_Themes/default/images/ajax-loader.gif")%>'
data-original='<%=Me.ResolveUrl("~/App_Themes/default/images/img100.jpg")%>' />
<asp:Image runat="server" ID="imgTest02" CssClass="lazyload"
ImageUrl="~/App_Themes/default/images/ajax-loader.gif"
data-original="~/App_Themes/default/images/img101.jpg"/>
<asp:Image runat="server" ID="imgTest03" CssClass="lazyload" />
</asp:Content>
<asp:Content ID="footer" ContentPlaceHolderID="cph_footer" runat="server">
</asp:Content>
<asp:Content ID="script" ContentPlaceHolderID="cph_script" runat="server">
<script src="<%=Me.ResolveUrl("~/App_Themes/default/scripts/jquery-1.10.2.min.js")%>"></script>
<script src="<%=Me.ResolveUrl("~/App_Themes/default/scripts/jquery.lazyload.min.js")%>"></script>
<script src="<%=Me.ResolveUrl("~/App_Themes/default/scripts/common.js")%>"></script>
</asp:Content>
Option Explicit On
Option Strict On
Imports BaseLibrary.Library
Public Class TestPage
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.SetImageUrl()
End If
End Sub
Private Sub SetImageUrl()
Me.imgTest03.ImageUrl = "~/App_Themes/default/images/ajax-loader.gif"
Me.imgTest03.Attributes.Add("data-original", Me.ResolveUrl("~/App_Themes/default/images/img102.jpg"))
End Sub
End Class
Option Explicit On
Option Strict On
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
<Assembly: TagPrefix("BaseLibrary.Controls", "custom")>
Namespace Controls
<ToolboxData("<{0}:BaseImage runat=""server"" ID=""imgControl1"" AlternalText="""" CssClass="""" />")>
Public Class BaseImage
Inherits Image
Public Property LazyLoad As Boolean = False
Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
'出力先を独自のTextWriterとして出力する
MyBase.Render(New ImageWriterWrapper(writer, Me))
End Sub
End Class
'''<summary>
'''属性を変更して出力するためのTextWriter
'''</summary>
Public Class ImageWriterWrapper
Inherits HtmlTextWriter
Private _control As BaseImage
Public Sub New(ByVal writer As HtmlTextWriter, ByVal control As BaseImage)
MyBase.New(writer)
'コントロールのインスタンスを保持する
Me._control = control
End Sub
'''<summary>
'''属性を追加する
'''</summary>
'''<param name="key">属性を表す列挙値</param>
'''<param name="value">属性に設定する値</param>
'''<remarks>
'''Imageが属性の設定のために本メソッドを呼び出すため、本メソッドで変更したい属性値を設定する
'''</remarks>
Public Overrides Sub AddAttribute(ByVal key As HtmlTextWriterAttribute, ByVal value As String)
Select Case key
Case HtmlTextWriterAttribute.Class
If Me._control.LazyLoad = True AndAlso
String.IsNullOrEmpty(Me._control.CssClass) = False Then
MyBase.AddAttribute("class", "lazyload " + Me._control.CssClass)
Else
MyBase.AddAttribute(key, value)
End If
Case HtmlTextWriterAttribute.Src
If Me._control.LazyLoad = True Then
If String.IsNullOrEmpty(Me._control.CssClass) Then
MyBase.AddAttribute("class", "lazyload")
End If
MyBase.AddAttribute("src", Me._control.Page.ResolveUrl("~/App_Themes/default/images/ajax-loader.gif"))
MyBase.AddAttribute("data-original", Me._control.Page.ResolveUrl(Me._control.ImageUrl))
Else
MyBase.AddAttribute(key, value)
End If
Case Else
MyBase.AddAttribute(key, value)
End Select
End Sub
End Class
End Namespace
<%@ Register Assembly="BaseLibrary" Namespace="BaseLibrary.Controls" TagPrefix="custom" %>
<custom:BaseImage ID="imgTest04" runat="server" AlternalText="" CssClass="" LazyLoad="True" />
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。