I have to add some li elements to a ul list. Each li elements contain:
one anchor
one img tag
The problem is that the image is not displayed.
JSFiddle: http://jsfiddle.net/michelejs/hxA9r/
function echoImages(json) {
alert(json);
var obj = $.parseJSON(json);
var html = "";
$.each(obj, function() {
html += '<li id ="menu_travel-store" class="space ">' + '<a href="' + this['redirectURL'] + '">' + '<img src="' + this['imageURL'] + '" />' + this['description'] + '</a>' + '</li>';
});
alert(html);
$("#cityOffers").append(html);
}
I have seen that Chrome add this css property:
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
background-position: 0px 0px;
but if I delete it with developer tools the image is not still showed.
What is the problem? Thanks.
解决了,问题是AdBlock Chrome扩展阻止图像加载.....
you use the wrong jQuery function use
$("#cityOffers").html(html);
instead of
$("#cityOffers").append(html);
html() expect a string containing HTML code while append() expect a dom object
I tested in firefox and it works.
I have structured your code a little better.
function echoImages(json) {
alert(json);
var obj = $.parseJSON(json);
var html = "";
$.each(obj, function () {
html += '<li id ="menu_travel-store" class="space ">' + '<a href="' + this.redirectURL + '">' + '<img src="' + this.imageURL + '" />' + this.description + '</a>' + '</li>';
});
alert(html);
$("#cityOffers").append(html);
}
$(document).ready(function () {
data = '[{"id":"1","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/1.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/1.png","title":"1","description":"1"},{"id":"3","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/3.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/3.png","title":"3","description":"3"},{"id":"6","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/9.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/9.png","title":"9","description":"9"},{"id":"2","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/2.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/2.png","title":"2","description":"2"},{"id":"5","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/5.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/5.png","title":"5","description":"5"},{"id":"4","redirectURL":"http:\/\/www.judopassion.com\/affiliate\/images\/4.png","imageURL":"http:\/\/www.judopassion.com\/affiliate\/images\/4.png","title":"4","description":"4"}]';
echoImages(data);
});
EDIT: This sounds like a problem accessing the images from the host. I've tested on multiple browsers old and new and it runs fine.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.