Không tải hình ảnh trong các yếu tố bị ẩn

Question

Đây là không trùng lặp của this vì nó cũng sử dụng phương pháp document.ready rõ ràng không hoạt động.

Tôi muốn tránh rằng trình duyệt tải hình ảnh (<img>) được lồng trong các thành phần ẩn <div>.

Vì vậy, tôi đã thử điều này, tuy nhiên javascript được thực hiện quá muộn, trình duyệt đã bắt đầu tải xuống hình ảnh mà nó không nên.

$(document).ready(function() { 
    $('div').not(":visible").each(function() { 
     $(this).find('img').each(function() { 
     $(this).attr("src",""); 
     }); 
    }); 
    }); 

Có giải pháp javascript tốt cho điều này không? Hoặc tôi có phải sử dụng <img srctmp="...."/> và sau đó thay thế srctmp bằng cách src qua javascript cho những hình ảnh KHÔNG được lồng trong một số <div> bị ẩn?

Answer 1

Bạn có thể sử dụng một thuộc tính data thay vào đó là src, tải trình duyệt hình ảnh chỉ tạo src, vì vậy bạn có thể bắt đầu với data-src cho mỗi hình ảnh và sau đó thêm các src chỉ đối với những người có thể nhìn thấy.

HTML:

<img data-src="path/to/image.jpg" /> 

JS:

$(document).ready(function() { 
    $('div').is(":visible").each(function() { 
     $(this).find('img').each(function() { 
     $(this).attr("src", $(this).data("src")); 
     }); 
    }); 
    });