內容摘要
這一講中,我講解了網絡世界中圖片格式,以及他們的一些特點
- JPG 或者JPEG
- GIF
- PNG
同時,還通過實例講解了三種常見的提高網頁顯示圖片的速度的策略
- 根據80/20法則,先顯示較小的圖片,只有當真正需要的時候,才顯示大圖片
- 使用異步加載的方式,加載大圖片
- 使用延遲加載的策略,實現更加智能化的加載方式
講義地址
視頻地址
http://www.tudou.com/programs/view/HWLDk95bBf8/
示例代碼(異步加載圖片)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript"> //window.Ready $(function () { $("img").each(function () { $(this).attr("src", $(this).attr("originalsrc")); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <img src="placeholder.png" originalsrc="DSC_0006.jpg" alt="" /> </div> </form> </body> </html>