Thảo luận về băng thông trên mã nguồn xen

Tầm 10h là giờ vàng câu view cho forum mình đấy...

Ơ mà nói thật là đã nghe nhiều đến CSS Sprite nhưng ko biết là áp dụng như thế nào...Mặc định của Xenforo có phần Smiley có tùy chỉnh Sprite hay phết, còn lại thì mù tịt, chắc cũng phải ráng tìm hiểu về thằng này

 

Anh em VietXF thảo luận vui quá!

 

View Source VNExpress xem đi bác!
VNExpress là thằng tiên phong ở VN áp dụng CSS Sprite đó!

 

hề, mình cũng toàn hđ từ 10h trở đi. xen sử dụng css sprite khá nhiều, như như bộ node icon và 1 số icon khác.


Tóm lại hiểu đơn giản là thay vì load nhiều ảnh nặng thì chỉ cần load 1 cái thôi.
Dùng thuộc tính background-position để xác định nó, còn tọa độ sao thì bác là dân ds rồi thì pts khỏi nói chứ

 

Đang muốn áp dụng CSS Sprite cho từng node icon mà chưa rảnh mò

 

Design thì khỏi nói, cơ mà áp dụng css thế nào thì quả thực còn rất mù mờ ^^

 

Dùng cái này hoặc cái này để biết cách tối ưu

 

kiếm cái nào utimate BW xài cho khỏi lo , hoặc dùng Could nhứ bác @phamhuudu

 

cái này hay à nha, đc thì chỉ ae nhé, cơ mà cũng hơi khoai nếu dùng custom node icon.

bác rành pts thì xem qua clip này
Còn mình mù pts thì chơi kiểu này nhanh hơn mà chuẩn hê
P/S: Cái này mới hay nè: DEMO

 

DS hộ cái logo vs banner diễn đàn dưới chữ ký vs

 

xong rồi bác ạ, cũng ko lâu lắm, qua đây mà vọc nhé
http://spritegen.website-performance.org/
demo: http://svlamnghiep.com

 

Thảo luận khá nhiều và khá hay nhưng nói thật e gà quá .. đọc mà không biết ứng dụng ra sao cả .. hic ..

 

Xong rồi thì share anh em đi!
Chèn thuộc tính background-position chỗ nào?

 

lạ nhể sao forum mình khoảng 3k views mất có 1.62g bw @@

 

cái này nghĩ thì khó nhưng làm đơn giản vô cùng.
Ko cần addon custom node icon nữa.
Nếu vẫn mún sử dụng icon mặc định khi mà node đó mình chưa add icon cho nó thì làm như sau:
Tạo 1 template mới, đặt tên là node_icon.css chẳng hạn

Mã:

.node.node_11 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 0 !important }
.node.node_12 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -41px !important }
.node.node_15 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -82px !important }
.node.node_17 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -123px !important }
.node.node_20 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -164px !important }
.node.node_25 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -205px !important }
.node.node_26 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -246px !important }
.node.node_27 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -287px !important }
.node.node_28 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -328px !important }
.node.node_29 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -369px !important }
.node.node_30 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -410px !important }
.node.node_31 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -451px !important }
.node.node_32 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -492px !important }
.node.node_35 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -533px !important }
.node.node_37 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -574px !important }
.node.node_39 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -615px !important }
.node.node_40 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -656px !important }
.node.node_42 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -697px !important }
.node.node_43 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -738px !important }
.node.node_48 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -779px !important }
.node.node_49 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -820px !important}
.node.node_50 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -861px !important }
.node.node_51 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -902px !important }
.node.node_52 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -943px !important }
.node.node_53 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -984px !important }
.node.node_54 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -1025px !important }
.node.node_55 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -1066px !important }
.node.node_56 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -1107px !important }
.node.node_57 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -1148px !important }
.node.node_60 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -1189px !important }
.node.node_61 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -1230px !important }
.node.node_62 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -1271px !important }
.node.node_63 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -1312px !important }
.node.node_64 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -1353px !important }
.node.node_65 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -1394px !important }
.node.node_66 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -1435px !important }
.node.node_67 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -1476px !important }
.node.node_74 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -1517px !important }
.node.node_80 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -1558px !important }
.node.node_81 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -1599px !important }
.node.node_82 .nodeIcon{background: url(images/icon/node_icon.png) no-repeat 0 -1640px !important }

Mở template node_list lên
Thêm cái này vào đầu

Mã:

<xen:require css="node_icon.css" />

Còn đoạn css kia làm sao có thì các bác qua http://spritegen.website-performance.org/ tạo nhé.
ném hết icon vào 1 folder rồi zip lại, upload lên nó sẽ xuất ra css tương ứng.
Các bác chỉ cần thay cho phù hợp với forum mình nhé, đoạn trên là của mình
.node.node_node-id .nodeIcon{background: url(link ảnh) no-repeat tọa độ x/y !important }

 

Nhiều bác chém như đúng rồi ấy nhỉ. Mình nói thẳng, mình dân chuyên ngành lập trình + thiết kế web đây. Thế nên mấy câu hỏi ở trang 1 chỉ là thử mấy bác thôi. Còn nhận xét như nào thì mình không ý kiến. Các bác tin bản thân đúng thì cứ support cho người khác như thế. Còn bản thân mình, mình chẳng nuốt được tí nào trong cái trang 2 kia.

 

hướng dẫn cụ thể cái này được không bạn .. mình bấm link vào nó ra nhưng không biết tối ưu sao

 

Đúng là nhìn thì khó mà vận động đầu óc 1 tí là ra bác nhỉ!
Cảm ơn bác nhiều!

 

ái chà, sói núp bóng thỏ non à, thế page 3 có nuốt đc câu nào ko bác

 

Thể loại gì đây? Ở đây, VietXF mình tin ng giỏi cũng nhiều mà ng ko biết gì cũng ko phải ít và mọi người đều cố gắng support với tất cả những kiến thức hạn hẹp mà mình đọc hoặc học được. Nếu sai chúng ta cùng góp ý để mọi người cùng sửa. Cậu núp bóng với mục đích gì? Thử rồi sao? Để biết rằng mình hơn khối người, để tự sướng với cái đống kiến thức của cậu hả? Cậu giỏi lắm rồi, thế thì làm ơn đừng tham gia diễn đàn làm gì nữa!

Mình tin rằng sự chia sẻ & giúp đỡ nhau sẽ giúp mọi người học được nhiều cái hay & sửa những cái sai, cái hiểu nhầm của mình, nếu đã ko muốn chia sẻ thì đừng tham gia diễn đàn làm gì nữa!!