如何按顺序加载图像？ [英] How to load images sequentially?

问题描述

我工作的长期滚动的网站，拥有一批充满背景高分辨率图像。目前它花费的时间太长加载，因为所有的图像并行默认加载。

I'm working on a long scrolling website that features a number of full background hi res images. It's currently taking too long to load since all the images are loaded in parallel by default.

所以在我编写自定义的东西，首先加载什么是第一位的，后来什么是后话（这种方式，第一滚动几乎瞬间加载，用户将等待剩余部分在阅读第一部分：P），有任何脚本，将做到这一点的盒子？

So before I custom write something to load first what comes first and later what comes later (this way the first scroll will load almost instantly and the user will wait for the remaining part while reading the first part :P), is there any script that will do this out of the box?

我想对一些现有的code，它会读取每个 IMG 标签或背景图像属性/样式属性，并加载图像顺序取决于其外观上的HTML或一些额外的属性。

I'm thinking on some existing code that will read each img tag or background-image property/style-attribute and load the images sequentially depending on their appearance on HTML or a some extra attribute.

我preFER香草JS或jQuery的。如果我不能找到它，我会写一个插件自己，票/鼓励所接受！

I prefer vanilla JS or jQuery. If I can't find it, I'll write a plugin myself, votes/encourages accepted!

推荐答案

我创建一个jQuery插件来实现这一目标。一探究竟！这是一个进展中的工作，所以欢迎您发表评论和建议！我花了很多来自延迟加载。

I created a jQuery plugin to achieve this. Check it out! It's a work in progress so you're welcome to comment and suggest! I took a lot from Lazy Load.

https://github.com/mspivak/sequencial_load

这篇关于如何按顺序加载图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！