jQuery.Có hiển thị hình ảnh nhỏ ở lần tải đầu tiên

Question

Tôi gặp sự cố với plugin jQuery.cycle. Lúc tải trang đầu tiên (khi imgs không được lưu trữ), nó hiển thị các hình ảnh nhỏ, như hình thu nhỏ. Bạn có thể nhìn thấy nó tại (chỉnh sửa: xin lỗi, liên kết cũ) - chỉ cần chờ đợi khi img thứ hai cho thấy - nó nhỏ. Tải lại/làm mới giải quyết nó, nhưng nó không phải là giải pháp thực sự, bạn biết.

Có ai biết giải pháp của vấn đề này là gì không? Cảm ơn rất nhiều

Answer 1

Sử dụng $(window).load(function() { }); hơn $(document).ready(function() { });

Answer 2

Tôi đã gặp vấn đề tương tự và điều đó khiến tôi phát điên! Tôi đã thử tải trước hình ảnh, các phiên bản đã kiểm tra trên mọi thứ, v.v. không có kết quả. Điều duy nhất dường như khắc phục điều này là đặt chiều rộng và chiều cao trên mỗi hình ảnh trên trang, thay vì trong css.

Answer 3

Sử dụng overflow:hidden trên những hình ảnh chứa DIV

Answer 4

Cùng một vấn đề. Hình ảnh ngẫu nhiên đã nhận được phong cách nội tuyến 24px x 24px. Thay vì đặt từng chiều cao và chiều rộng hình ảnh, tôi đã làm như vậy thông qua CSS. Vì chiều rộng của tôi là chiều rộng cố định, tôi đã đặt nhưng đặt chiều cao thành 100%:

.ParentDiv img { width: 400px !important; height: 100% !important; } 

Điều quan trọng là cần thiết để ghi đè kiểu nội tuyến do chu kỳ jQuery áp dụng.

Điều này cũng dường như giải quyết một vấn đề khác mà tôi gặp phải với IE8. Trang sẽ tải tốt, nhưng hình ảnh dường như đang tải sau khi tải tất cả CSS và jquery. Điều này khiến hộp không mở rộng để vừa với chiều cao và chiều rộng của hình ảnh bên trong. Tôi tưởng tượng thiết lập chiều rộng và chiều cao, hộp giữ hình ảnh có kích thước ngay lập tức.

Answer 5

tôi giải quyết này bằng cách thiết lập chiều rộng và chiều cao trong thẻ <img>. Nhưng kể từ khi tôi đang sử dụng một kịch bản để tạo ra danh sách các hình ảnh, và đôi khi họ có kích cỡ khác nhau, tôi đã sử dụng một chút nhỏ bé của php để giải quyết này:

function displayimage($filename) { 
    $imgsize = getimagesize("$filename"); 
    echo "<img src=\"$filename\" $imgsize[3] />\n"; 
} 

$imgsize[3] là, ví dụ, width="585" height="285".

Và sau đó, để hiển thị tất cả jpgs trong thư mục trong trình chiếu:

<div class="slideshow"> 
<?php 
foreach (glob("*.jpg") as $filename) { 
    displayimage($filename); 
} 
?> 
</div> 

Output

<div class="slideshow"> 
<img src="cat.jpg" width="575" height="256" /> 
<img src="dog.jpg" width="475" height="350" /> 
<img src="frog.jpg" width="675" height="300" /> 
</div> 

Answer 6

Trong khi có thể không trả lời trực tiếp cho câu hỏi (các plugin jQuery.cycle là không biết với tôi), nhiều câu trả lời ở đây giải quyết vấn đề xử lý hình ảnh sau khi tải và đó cũng là những gì mọi người đến đây để tìm kiếm. Vì vậy, ở đây nó xảy ra những gì đang xảy ra:

24px xuất hiện do lỗi lôgic trên các kích thước sớm quay về phía trình duyệt để điều khiển trình giữ chỗ. Họ có logic điều khiển khác để xử lý hình ảnh được lưu trong bộ nhớ cache, IE thậm chí không kích hoạt onload cho chúng và đó là lý do tại sao tất cả sự nhầm lẫn xuất hiện.

đáng tin cậy Hơn (width===0) kiểm tra để được tìm thấy khắp nơi trên internet nếu một hình ảnh được tải, tài sản .complete DOM hiếm khi rõ ràng là đề cập đến sự hỗ trợ của tất cả các trình duyệt chính: http://www.w3schools.com/jsref/prop_img_complete.asp

này làm việc cho tôi:

$("img") 
    .one('load', onLoadRoutine) 
    .each(function() { 
     if(!this.complete) { 
      return; //.one() will fire eventually 
     } else { 
      onLoadRoutine({delegateTarget:this}); //fake event object 
     } 
    }); 

Lưu ý đối tượng mô phỏng sự kiện {delegateTarget:this}. Thích hợp hơn sẽ là jQuery(this).trigger('load'), nhưng tôi không thể khuyên bạn nên nó, vì tôi đã không thử nó ra vào thời điểm đó ...

kiểm tra .complete nên giải quyết trường hợp của logic bị lỗi placeholder kiểm soát của 24px, các .one('load').each() . bao gồm sự phân chia dòng điều khiển trên bộ nhớ đệm/xa.