網絡世界中的圖片以及相關的處理


內容摘要

這一講中,我講解了網絡世界中圖片格式,以及他們的一些特點

  1. JPG 或者JPEG
  2. GIF
  3. PNG

同時,還通過實例講解了三種常見的提高網頁顯示圖片的速度的策略

  1. 根據80/20法則,先顯示較小的圖片,只有當真正需要的時候,才顯示大圖片
  2. 使用異步加載的方式,加載大圖片
  3. 使用延遲加載的策略,實現更加智能化的加載方式

 

講義地址

https://skydrive.live.com/redir.aspx?cid=bb01f26f28894a40&resid=BB01F26F28894A40!127&parid=BB01F26F28894A40!111

 

視頻地址

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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM