更改页面上已存在图像的加载顺序 [英] Change loading order of images already on page

问题描述

是否可以在没有AJAX的情况下 更改页面上图像的加载顺序?甚至是一种完全停止或暂停已经存在的图像加载的方法?

Is there any way without AJAX of changing the loading order of images on a page? Or even a way to completely halt or pause loading of images already present?

用例很简单-我在页面下有很长的图像列表，访问者将使用URL锚点(/images#middle-of-page)指向页面的不同位置，这些URL锚点引用了实际的容器，这些图像.

The use case is simple - I have a long list of images down a page, and visitors will be landing on different spots of the page using URL anchors (/images#middle-of-page) that refer to actual containers for those images.

我希望至少首先将图像加载到请求的容器中，然后继续加载其余图像.

I'd like in the least to load the images inside the requested container FIRST, then continue loading the rest of the images.

挑战在于，在加载页面DOM之前无法知道请求的容器图像的图像路径.

The challenge is that there is no way to know the image paths of the requested container image before loading the page DOM.

我尝试加载容器img的内容，然后使用Javascript新的Image()技术，但是它并不能改变页面上的该图像仍在等待所有先前图像加载的事实.

I've tried getting the container img contents on load, then using the Javascript new Image() technique, but it doesn't change the fact that that image on the page will still be waiting for all previous images to load.

我还尝试立即在体内的div前面添加所述img路径的背景图像(CSS)，但这也没有优先考虑图像加载.

I've also tried immediately prepending a div in the body with a background image (CSS) of said img path, but this also does not prioritize the image load.

还有其他想法吗?

推荐答案

您需要具有一个带有空img占位符的DOM，即

You need to have a DOM with empty img placeholders, i.e.

<img src="" mysrc="[real image url here]" />

或者您也可以使图像默认显示正在加载..."图像.您甚至可以在某些自定义标记(例如mysrc)中缓存实际图像的url.然后，一旦知道要显示什么图像(以什么顺序显示)，就需要构建图像加载序列

Or you can make images to display "Loading..." image by default. You can even cache real image url in some custom tag, mysrc for example. Then once you know what exactly images you want to show (and in what order) you need to build a sequence of image loading

var images = [];//array of images to show from start and in proper order
function step(i){
  var img = images[i++];
  img.onload = function(){
    step(i);
  }
  img.src = "[some url here]"
}

希望这会有所帮助.

这篇关于更改页面上已存在图像的加载顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！