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

Posted 2023-02-25

【中文标题】更改页面上已有图像的加载顺序

【英文标题】：Change loading order of images already on page

【发布时间】：2011-10-26 17:16:50

【问题描述】：

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

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

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

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

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

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

还有其他想法吗？

【问题讨论】：

不。浏览器将按照图像在 html 中出现的顺序请求图像，但它们到达的顺序是它无法控制的。

有什么方法可以立即杀死仍在加载的图像？还是在处理之前更改订单？

@atwixor 不，您需要查看 AJAX 解决方案。 HTML 根本不支持这种东西。

可能在用户登陆页面之前预加载图像？

谢谢 - 我会把它作为答案，@mblase75。由于我对从头开始 AJAX 冒险（并不真正了解协议）持谨慎态度，我想我可能只是用文本图像源路径填充页面，然后在查看时使用 jQuery 将它们转换为 <img> 元素。

【参考方案1】：

你需要一个带有空 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]"

希望这会有所帮助。

【讨论】：

自定义属性应该是data-src

谢谢 - 我认为这适合我的情况 - 我今天会测试一下。

【参考方案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);
        
    

【参考方案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