Question

是否有任何方式没有AJAX 更改页面上图像的加载顺序？甚至是一种完全停止或暂停加载已存在图像的方法？

用例很简单 - 我在页面上有一长串图像，访问者将使用URL锚点（/ images＃middle-of-page）登陆页面的不同位置，这些锚点引用实际的容器那些图像。

我想至少将图像加载到请求的容器中，然后继续加载剩下的图像。

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

我已尝试在加载时获取容器img内容，然后使用Javascript new Image（）技术，但它不会改变页面上的图像仍将等待加载所有先前图像的事实。

我还尝试使用所述img路径的背景图像（CSS）立即在主体中添加div，但这也没有优先考虑图像负载。

还有其他想法吗？

Answer 1

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

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

或者您可以使图像默认显示“正在加载...”图像。您甚至可以在一些自定义标记中缓存实际图像网址，例如mysrc。然后，一旦你知道你想要显示的图像（以及以什么顺序），你需要构建一系列图像加载

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]"
}

希望这有帮助。

Answer 2

感兴趣的是，这是我最终根据这里的答案实现的功能（我使其成为按需加载功能以获得最佳速度）：

function loadImage(img) { // NEED ALTERNATE METHOD FOR USERS w/o JAVASCRIPT! Otherwise, they won't see any images.

      //var img = new Image(); // Use only if constructing new <img> element

        var src = img.attr('alt'); // Find stored img path in 'alt' element

        if(src != 'loaded') {

          img

            .load(function() {
              $(this).css('visibility','visible').hide().fadeIn(200); // Hide image until loaded, then fade in
              $(this).parents('div:first').css('background','none'); // Remove background ajax spinner
              $(this).attr('alt', 'loaded'); // Skip this function next time
              // alert('Done loading!');
            })

            .error(function() {
              alert("Couldn't load image! Please contact an administrator.");
              $(this).parents('div:first').find("a").prepend("<p>We couldn't find the image, but you can try clicking here to view the image(s).</p>");
              $(this).parents('div:first').css('background','none');
            })

            .attr('src', src);
        }
    }

Answer 3

img loading="lazy"属性现在提供了一种实现此功能的好方法。

有了它，图像仅在视口上自动加载。但是您也可以通过在JavaScript中进行设置来强制加载它们：

document.getElementById('myimg').loading = 'eager';

我在以下位置提供了完整的可运行示例：How do you make images load lazily only when they are in the viewport?

关于此方法的一个非常酷的事情是它是完全SEO友好的，因为src=属性像往常一样包含图像源，另请参见：Lazy image loading with semantic markup

更改页面上已有图像的加载顺序

3 个答案: