9 thg 9, 2011

SlideShow chạy ảnh rất chậm

Haizz, xin chào các bạn. Chào mừng các bạn đến với tình huống ngày hôm nay. :D
Tôi đang làm 1 site: http://360bongda.com.vn/. Hoàn thành hết rồi nhưng lại gặp phải một lỗi khá kỳ quặc là: slide show của mục clip mới load mãi không xong. (Rất chậm - khách hàng comment). Chúng ta cùng mày mò nào,
Ta có một số thông tin như sau:
- Việc load chậm này chỉ phụ thuộc vào việc load file: slideshow jquery, ảnh hiển thị.
- Dùng tiện ích Net trong Firebug, tôi nhận thấy rằng: ảnh hiển thị được load lên từ khá sớm (chỉ mất 1,35 s), file js thì còn load lên sớm hơn (mất 420ms). Ảnh cũng được load lên rồi, mà sao vẫn ko hiển thị.
- Nhìn kỹ hơn 1 chút  thấy việc chạy slide show (có ảnh) được bắt đầu khi site load được một cách hoàn toàn. Trong site của tôi có sử dụng 1 đoạn script thực hiện việc down dữ liệu từ site khác về. Vì thế, khi down xong thì việc load site mới gọi là hoàn thành.

Như vậy, phải chăng việc thực hiện js này đã được chọn tại thời điểm load site complete. Bây giờ ta phải set lại nó.
Ta xem xét việc gọi đến hàm chạy slideshow này:
window.onload=function(){
        slideshow.auto=true;
        slideshow.speed=50;
        slideshow.link="linkhover";
        slideshow.info="information";
        slideshow.thumbs="slider";
        slideshow.left="slideleft";
        slideshow.right="slideright";
        slideshow.scrollSpeed=10;
        slideshow.spacing=5;
        slideshow.active="#fff";
         slideshow.init("slideshow","image","imgprev","imgnext","imglink");
    }

Oh, ở đây dùng window.onload. Tức là, phương thức việc chạy được slideshow một cách hoàn thiện thì cần phải load hết các dữ liệu về site như images, js, css, dữ liệu từ site ngoài,...
Như thế chậm là phải rồi. Ta thay bằng

$(document).ready(
    function() {
        slideshow.auto = true;
        slideshow.speed = 5;
        slideshow.link = "linkhover";
        slideshow.info = "information";
        slideshow.thumbs = "slider";
        slideshow.left = "slideleft";
        slideshow.right = "slideright";
        slideshow.scrollSpeed = 2;
        slideshow.spacing = 2;
        slideshow.active = "#fff";
        slideshow.init("slideshow", "image", "imgprev", "imgnext", "imglink");
    }
    )

Thế là ok, chạy ngon rồi. Ta phục ta quá.

0 nhận xét: