jQuery，JavaScript，HTML：如何在加载其他所有内容后加载图像？
嘿伙计们，我有一个非常复杂的页面，有很多脚本和相当长的加载时间。 在该页面的顶部，我想实现jquery Nivo Slider（http://nivo.dev7studios.com/）。
在文档中，它说我必须在div＃slider中列出滑块的所有图像
但是我可能有10张1000x400px的图像非常大。 页面加载时会加载这些图像。 由于它们在我的标题中，这可能需要相当长的时间。
我正在寻找一种方法来使用任何jquery Slider插件（如nivo滑块），但要么动态加载图像，要么在我的页面上的其他所有内容加载后加载所有这些图像。
知道如何解决这个问题吗？
甚至有一种方法可以在页面上的其他内容加载后启动javascript进程？ 如果有一种方法我可能有我的问题的解决方案（使用jquery ajax load（）方法）…但是我不知道如何等待其他一切加载，然后启动所有图像的滑块。
这就是我们所做的和它的工作。 我们跳过设置src属性并将img-location添加到假属性lsrc 。 然后我们加载一个带有lsrc值的动态图像，并在加载后设置实际图像的src 。
它不是关于更快的加载，而是关于仅在完全下载到您的页面时显示图像，以便用户不必看到恼人的半载图像。 在加载实际图像时可以使用占位符图像。
这是代码。
$(function(){ $.each(document.images, function(){ var this_image = this; var src = $(this_image).attr('src') || '' ; if(!src.length > 0){ //this_image.src = options.loading; // show loading var lsrc = $(this_image).attr('lsrc') || '' ; if(lsrc.length > 0){ var img = new Image(); img.src = lsrc; $(img).load(function() { this_image.src = this.src; }); } } }); });
编辑：Trick是仅在临时img中加载该源时才设置src属性。 $(img).load(fn); 处理那个。
除了Xhalent的答案，使用jQuery中的.append（）函数将它们添加到DOM：
你的HTML只有：
然后你的jquery将是：
jQuery(function(){ $("#slider").append(''); });
检查出 jquery load（）事件，它等待包括图形在内的所有内容
$(window).load(function () { // run code });
在加载时，您可以使用以下方式加载图像：
var image = new Image(); image.src = "/path/to/huge/file.jpg";
您也可以向图像添加函数onload
image.onload = function() { ... }
最好的使用方法是b -lazy js 。 bLazy是一个轻量级的延迟加载图像脚本（小于1.2KB缩小和gzip压缩）。 它允许您延迟加载并多次提供图像，以便节省带宽和服务器请求。 如果用户不浏览整个页面，则用户将具有更快的加载时间并保存加载的数据。 有关选项，function和示例的完整列表，请访问博客文章： http ： //dinbror.dk/blog/blazy 。
以下示例是一个延迟加载多服务响应图像示例与图像回调:)如果您的设备宽度小于420像素它将提供更轻和更小版本的图像。 加载图像后，它会删除回调中的加载程序。
在Html中
在js
var bLazy = new Blazy({ breakpoints: [{ width: 420 // Max-width , src: 'data-src-small' }] , success: function(element){ setTimeout(function(){ // We want to remove the loader gif now. // First we find the parent container // then we remove the "loading" class which holds the loader image var parent = element.parentNode; parent.className = parent.className.replace(/\bloading\b/,''); }, 200); } });
例
jquery有一个在加载文档后执行javascript的语法：