fc2ブログ

記事一覧

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


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


aspnet_lazyload_03.png


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



1.LazyLoad のインストール

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

aspnet_lazyload_01.png


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

aspnet_lazyload_02.png


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

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



2.LazyLoadの使用方法

以下の手順で実装します。
(1)aspxページに jquery.min.js と lazyload.min.js を配置します。
(2)$('img.lazyload').lazyload(); を JS に追加します。
(3)class="lazyload" をイメージタグに追加します。
(4)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 からのパスを固定値で記載していますが、動的に変更することもできます。(こちらから前回の記事をご参考ください。)



3.派生コントロールを利用する方法

各画像タグ毎に 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 に関連する記事を投稿しておりますのでよろしければご参考くださいませ。




関連記事

コメント

コメントの投稿

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

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

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。