2

没有 AJAX有没有办法改变页面上图像的加载顺序？甚至是一种完全停止或暂停加载已经存在的图像的方法？

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

我至少想先在请求的容器中加载图像，然后继续加载其余的图像。

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

我尝试在加载时获取容器 img 内容，然后使用 Javascript new Image() 技术，但这并没有改变页面上的图像仍将等待所有以前的图像加载的事实。

我还尝试立即在正文中添加一个带有所述 img 路径的背景图像 (CSS) 的 div，但这也不会优先考虑图像加载。

还有其他想法吗？

4

3 回答 3

2

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

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

或者您可以使图像默认显示“正在加载...”图像。例如，您甚至可以在某些自定义标签中缓存真实图像 url 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]"
}

希望这可以帮助。

于 2011-10-26T17:38:49.567 回答
0

出于兴趣，这是我最终根据此处的答案实现的功能（我将其设置为按需加载功能以实现最佳速度）：

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);
        }
    }
于 2011-11-07T15:37:03.903 回答
0

该img loading="lazy"属性现在提供了一种很好的实现方式。

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

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

我在以下位置提供了一个完整的可运行示例：如何使图像仅在视口中时才延迟加载？

这种方法的一个非常酷的地方是它对 SEO 完全友好，因为该src=属性像往常一样包含图像源，另请参阅：带有语义标记的延迟图像加载

于 2020-04-22T06:50:39.277 回答