Delay image loading with jQuery

后端未结

关注

 4  1159

I have a page with several galleries including accordions and sliders. The problem is that the page takes forever to load. Is there a way of wrapping an image in a bit of

相关标签:

4条回答

猫巷女王i

2020-12-04 15:05

If you're using jQuery (and I assume you are as this is tagged as such) take a look at the Lazy Load Plugin for jQuery. It delays the loading of images that are outside the viewport until the user scrolls to them.

Update 2015: This plugin was broken at one point, but now works again. The last comment says as much, but I almost missed it because it was hidden in the collapsed comments.

0 讨论(0)
发布评论:

提交评论
- 加载中...
感情败类

2020-12-04 15:07
An easy way to delay loading images (and iFrames) is with a combination of pure JS, jQuery.data() and the custom HTML5 data-* attribute. The src of the image initially can point to a loading GIF. The data-* attribute contains the URL path of the image you ultimately want to load. The pure JS sets up a delay (3000 milliseconds in the example below), and then executes the jQuery.data(), which sets the image's src to the intended image.

The example below performs on each image with class="load-delay".

Live Example: http://seandebutts.com/2013/07/03/html5-delay-loading-images-iframes/

CODE

JS and jQuery:
```
$(document).ready(function () {
  setTimeout(function () {
    $('.load-delay').each(function () {
      var imagex = $(this);
      var imgOriginal = imagex.data('original');
      $(imagex).attr('src', imgOriginal);
    });
  }, 3000);
});
```
HTML and jQuery Library:
```
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <meta charset="utf-8" />

</head>
<body>
  <h1>Loading-Delayed Image</h1>
  <img class="load-delay" src="http://i.imgur.com/7ZMlu3C.gif" data-original="http://oi42.tinypic.com/9sqmaf.jpg" />
</body>
</html>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
爱一瞬间的悲伤

2020-12-04 15:15
Sure you can. Replace your img src attributes with a "#", and add a custom attribute, something like this:
```
<img src="#" data-delayedsrc="/img/myimage.png" />
```
Then, add a javascript line when your page loads that does something like this:
```
$('img').each(function(){
  $(this).attr('src', $(this).data('delayedsrc'));
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
攒了一身酷

2020-12-04 15:27
Keep only one image into the HTML so that viewer has something to start with, then inject the rest using jQuery with
```
$(document).ready(function() {
    //load rest of the images
});
```
You can also use event loaders and AJAX or "load as you go", just build a simple call back function if it's auto-rotating gallery or load on click.
0 讨论(0)
发布评论:

提交评论
- 加载中...