LazyLoadを使用して画像を遅延読み込みする方法 -How to use LazyLoad.js-

LazyLoadを使用して画像を遅延読み込みする方法 -How to use LazyLoad.js- | asp.net

2019/03/17
22:18

今回は asp.net において画像を遅延読み込みする方法を覚え書きします。
Javascript だけでなく、大きな画像を表示することでもレンダリングはブロックされ、ページ全体のパフォーマンスは悪くなります。
そこで LazyLoad という Javascript を読み込むことにより画像を遅延して読み込ませることでパフォーマンスを改善し、さらにはその間に別の画像（ローダー等のgifファイル）を表示することもできます。

前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2010 Professional 以降
・VB.NET
・.Net Framework 4.0 以降

１．LazyLoad のインストール

NuGet パッケージマネージャから LazyLoad で検索し、「Jquery.LazyLoad」をインストールします。

インストールボタンを押下すると、以下のようなダイアログが表示されますので、OKボタンを押下して、インストールします。

または、GitHubにも公開されていますので、以下のURLよりダウンロードして、任意のフォルダに配置することでも実装が可能です。
https://github.com/tuupola/jquery_lazyload

私の場合は、前回の記事でもご紹介しているとおりテーマを採用していますので、以下のフォルダに配置しました。
/App_themes/default/script/jquery.lazyload.min.js

２．LazyLoadの使用方法

以下の手順で実装します。
（１）aspxページに jquery.min.js と lazyload.min.js を配置します。
（２）$('img.lazyload').lazyload(); を JS に追加します。
（３）class="lazyload" をイメージタグに追加します。
（４）src属性となるImageUrlプロパティに待機用画像（ローダー）を設定し、data-original属性に本来の画像ファイルのパスを設定します。
※GitHubからダウンロードした場合は、"data-src"となっていると思います。詳しくは JS ファイル内を検索するとどちらで実装すれば良いかはっきりすると思います。

common.js

$(function () {
    $('img.lazyload').lazyload({
        effect: 'fadeIn',
        effectspeed: 3000,
        threshold: 300
    });    
});

TestPage.aspx

<%@ 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>

TestPage.aspx.vb

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

※imgTest01 / imgTest02 は aspx 側で画像の設定をしていますが、imgTest03 は VB 側で画像を設定しています。
※今回は App_themes からのパスを固定値で記載していますが、動的に変更することもできます。（こちらから前回の記事をご参考ください。）

３．派生コントロールを利用する方法

各画像タグ毎に src 属性と data-original 属性を記述することは設定漏れや動作不良を起こす可能性もありますので、サーバーコントロール側で自動的にLazyLoadが設定されると良いと思います。そこで派生コントロールを実装し、LazyLoadをプロパティにして簡単に実装できるようにしてみました。

BaseImage.vb

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

※カスタムコントロールをツールボックスに表示するには以前の記事「ボタンのテキストを改行させる方法」や「span タグを出力しないラジオボタンの作成方法」でご紹介していますので、ご参考ください。

このカスタムコントロールは以下の様に使用します。
※jqeury / lazyload.min.js の設定は別途必要です。

TestPage.aspx

<%@ Register Assembly="BaseLibrary" Namespace="BaseLibrary.Controls" TagPrefix="custom" %>
<custom:BaseImage ID="imgTest04" runat="server" AlternalText="" CssClass="" LazyLoad="True" />

以上で画像を遅延して読み込み、レンダリングをブロックせずにページを速く描画することができます。

最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。

関連記事

一意のキー属性 'value' が 'default.aspx'に設定されている種類 'add' の重複コレクションエントリを追加できません - Web.config の設定- | asp.net
インライン式の使用方法 -aspxでのVBコードの記述方法- | asp.net
LazyLoadを使用して画像を遅延読み込みする方法 -How to use LazyLoad.js- | asp.net
テーマを設定してCSSやJSを動的に変更する方法 -How to use Theme- | asp.net
リピーターの明細毎のデータを取得・更新する方法 -How to get the dataitem value of all rows in repeater- | asp.net

バッテリー残量を取得する方法 | Xamarin.Forms ホームテーマを設定してCSSやJSを動的に変更する方法 -How to use Theme- | asp.net

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

　入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

ITブログ時々なんでもブログ