10/10/2018, 10:29

Hỏi về hình ảnh trên trang web

Mình thấy hình ảnh của một số trang được load một cách từ từ, có nghĩa là hình ảnh rõ dần lên, từ hạt to rồi đến hạt nhỏ, chi tiết dần lên. Hình ảnh này làm bằng cách nào, photoshop có làm được không, cho em xin từ khóa google về vấn đề này, thanks mọi người

cayriver viết 12:42 ngày 10/10/2018

chắc nó dùng javascript , và có một hiệu ứng cực kỳ hiệu quả đấy là lazyload, tức là nếu bạn có rất nhiều ảnh trên 1 trang, kéo thanh cuộn dọc đến đâu thì ảnh sẽ lần lượt được load đến đó, và kèm theo nó là hiệu ứng load mờ mờ ảo ảo rất hay. Cái này làm cho trang web load cực nhanh.

hoangcn02 viết 12:44 ngày 10/10/2018

Được gửi bởi bvnguyen

Không rõ lắm ý bạn hỏi, nhưng chắc có lẽ là mấy hiệu ứng hình ảnh của js, thử google với từ khóa js và fade thử

thuyduongcd viết 12:30 ngày 10/10/2018

Có nhiều cách, tùy thuộc trình độ mà sử dụng

Cách 1, dùng 2 hình, một hình highres và 1 lowres (bất kỳ PM xử lý ảnh nào cũng có công cụ giảm độ phân giải). Sau đó dùng thuộc tính lowsrc của thẻ img

Code:

<img src="high_res_picture.png" lowsrc="low_res_picture.gif" />

Cách thứ 2 cũng dùng 2 hình kết hợp javascript.
Trước tiên cho load hình low_res.

Code:

<img name="mypic" src="lowres.gif" />
<img name="mypic" src="lowres.gif" />

Sau khi trang load xong (dùng onload event), tìm tất cả các thẻ img và thay thế thuộc tính src của nó bằng hình high res.

Code:

<script language="javascript">
function replaceimage(){
var obj=document.getElementsByName("mypic");
for (x in obj)
{
   obj[x].src=obj[x].src.replace("low","high");
}
}
</script>
<body onload="replaceimage()">
<img name="mypic" src="lowres1.gif" />
<img name="mypic" src="lowres2.gif" />
</body>

Để sử dụng cách này, bạn cần có từng cặp hình có tên tương ứng (lowres1.gif và highres1.gif), (lowres2.gif và highres2.gif). Ưu điểm là có thê mở rộng để load ở nhiều cấp độ.

Cách thứ 3 kết hợp cả js và php, là mở rộng cho cách 2, thay vì dùng 2 hình tĩnh khác nhau thì mình dùng 1 hình với tham số khi gọi.
Ví dụ, ban đầu gọi:

Code:

<img src="loadimage.php?src="imagename"&res="low" />

Sau đó:

Code:

<img src="loadimage.php?src="imagename"&res="normal" />

Và cuối cùng:

Code:

<img src="loadimage.php?src="imagename"&res="high" />

Ở trang loadimage.php, nhận vào tên hình và độ phân giải để trả về ảnh tương ứng (bằng GD library). Cách này đòi hỏi kỹ thuật hơi cao.

voanhlhu viết 12:43 ngày 10/10/2018

http://anhmobile.freetzi.com/ vao thu xem nhe

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

bvnguyen

0 chủ đề

0 bài viết

Tác giả nổi bật

Từ khóa nổi bật

AngularJS Blog Bootstrap C / C++ Cấu trúc dữ liệu & Giải thuật Cơ sở dữ liệu Codeigniter Công cụ lập trình CSS CSS cơ bản CSS3 Học Excel HTML HTML cơ bản HTML5 Java Javascript jQuery Json Lập trình mobile Laravel Linux MongoDB MySQL NodeJS Oracle Pascal PHP PHP cơ bản PHP nâng cao Python React Native ReactJS Ruby SEO SQL Server Swift Visual Basic VueJS WordPress XML

Chủ đề nổi bật

Hỏi về hình ảnh trên trang web

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI