使用jQueryasynchronous加载图像
我想使用jQueryasynchronous加载我的页面上的外部图像 ，我已经尝试了以下内容：
$.ajax({ url: "http://somedomain.com/image.jpg", timeout:5000, success: function() { }, error: function(r,x) { } }); 但它总是返回错误，甚至有可能像这样加载图像？
我试图使用.load方法，它的工作原理，但我不知道如何设置超时如果图像不可用（404）。 我该怎么做？
不需要阿贾克斯。 您可以创build一个新的图像元素，设置它的源属性，并在完成加载后将其放置在文档的某个位置：
var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg') .on('load', function() { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { alert('broken image!'); } else { $("#something").append(img); } });
如果您真的需要使用AJAX …
我遇到了使用情况的地方，那里的onload处理程序不是正确的select。 在我的情况下，通过JavaScript打印。 所以实际上有两个select使用AJAX风格：
解决scheme1
使用Base64图像数据和REST图像服务。 如果您有自己的Web服务，则可以添加一个以Base64编码提供图像的JSP / PHP REST脚本。 那现在怎么样？ 我遇到了一个很酷的新的图像编码语法：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>
因此，您可以使用Ajax加载Image Base64数据，然后在完成后将Base64数据string构build到图像中！ 非常有趣 ：）。 我build议使用此网站http://www.freeformatter.com/base64-encoder.html进行图像编码。;
$.ajax({ url : 'BASE64_IMAGE_REST_URL', processData : false, }).always(function(b64data){ $("#IMAGE_ID").attr("src", "data:image/png;base64,"+b64data); });
溶液2：
哄骗浏览器使用它的caching。 当资源位于浏览器caching中时，这会给你一个很好的fadeIn（）：
var url = 'IMAGE_URL'; $.ajax({ url : url, cache: true, processData : false, }).always(function(){ $("#IMAGE_ID").attr("src", url).fadeIn(); });
但是，这两种方法都有其缺点：第一种方法只适用于现代浏览器。 第二个有性能故障，并依靠假设如何使用caching。
欢呼声，会
$(<img />).attr('src','http://somedomain.com/image.jpg');
应该比ajax更好，因为如果它的图片库和循环的图片列表，如果图像已经在caching中，它不会发送另一个请求到服务器。 它会请求在jQuery / ajax的情况下，并返回一个HTTP 304（未修改），然后使用原始图像从caching，如果它已经在那里。 上述方法减less了图库中第一个图像循环后对服务器的空请求。
使用jQuery，您可以简单地将“src”属性更改为“data-src”。 图像将不会被加载。 但是该位置与标签一起存储。 我喜欢哪个
<img class="loadlater" data-src="path/to/image.ext"/>
一个简单的jQuery将data-src复制到src，它会在你需要的时候开始加载图像。 在我的情况下，当页面完成加载。
$(document).ready(function(){ $(".loadlater").each(function(index, element){ $(element).attr("src", $(element).attr("data-src")); }); });
我敢打赌，jQuery代码可以缩写，但这是可以理解的。
您可以使用Deferred对象进行ASYNC加载。
function load_img_async(source) { return $.Deferred (function (task) { var image = new Image(); image.onload = function () {task.resolve(image);} image.onerror = function () {task.reject();} image.src=source; }).promise(); } $.when(load_img_async(IMAGE_URL)).done(function (image) { $(#id).empty().append(image); });
请注意：image.onload必须在image.src之前，以防止caching问题。
如果你只是想设置图像的来源，你可以使用这个。
$("img").attr('src','http://somedomain.com/image.jpg');
这工作也..
var image = new Image(); image.src = 'image url'; image.onload = function(e){ // functionalities on load } $("#img-container").append(image);
AFAIK你将不得不做一个.load（）函数在这里作为.ajax（），但你可以使用jQuery的setTimeout保持住（ish）
<script> $(document).ready(function() { $.ajaxSetup({ cache: false }); $("#placeholder").load("PATH TO IMAGE"); var refreshId = setInterval(function() { $("#placeholder").load("PATH TO IMAGE"); }, 500); }); </script>
使用.load来加载你的图像。 要testing你是否得到一个错误（比方说404），你可以做到以下几点：
$("#img_id").error(function(){ //$(this).hide(); //alert("img not loaded"); //some action you whant here });
当图像的src属性为空时，谨慎 – .error（）事件不会触发。
$（function（）{
if ($('#hdnFromGLMS')[0].value == 'MB9262') { $('.clr').append('<img src="~/Images/CDAB_london.jpg">'); } else { $('.clr').css("display", "none"); $('#imgIreland').css("display", "block"); $('.clrIrland').append('<img src="~/Images/Ireland-v1.jpg">'); } });
你可以做到这一点..或者你可以使用这个相同的代码和更小的代码。
$(function() { $('body').append('<img src="images.png">'); });
这节省了一些代码。
