0
我有一個片段，用於增加圖像的大小，並將td放在圖像的右側並將其放在下面。jQuery - 沒有正確迭代？ （執行時間太長）
但是，從刪除TD添加它的時間開始，這需要花費很長時間，並且使頁面渲染/繪畫/流看起來很糟糕。
請參閱下面的視頻，以更好地瞭解發生了什麼。
http://screencast.com/t/RQdBiNyGkEm
也請參閱我下面的代碼片段;
<script>
$(document).ready(function() {
$('html').addClass('js');
$('.description').show();
// add a td for initial page load of cart.
$("table#shopping-cart-items tr td.image").after($('<td id="clearSpacePageLoad"></td>'));
// take content from right - and drop it beneath the image
$('#shopping-cart-items > tbody > tr').each(function() {
var desc = $('td.description', this).html()
$('td.description', this).remove();
$('td.image', this).append(desc);
});
});
</script>
<script>
//When selecting a delivery method - everything resets due to AJAX.
$(document).ready(function() {
// Use .live() in stead of .on() since jQuery is < 1.9
// On select of delivery method do the following
$('.shippingOpt').live('click', function() {
// Wait for ALL ajax requests on page (Past and future) to execute BEFORE executing the following
$(document).ajaxStop(function() {
// Repeat the same code as initial page load.
$('img.item-img').each(function() {
var str = $(this).attr('src'),
arr = str.split("?");
query = "?hei=200&wid=200&op_sharpen=1"
$(this).attr('src', arr[0] + query);
});
$('#shopping-cart-items > tbody > tr').each(function() {
var desc = $('td.description', this).html()
$('td.image', this).append(desc);
$('td.description', this).remove();
});
// If ID of 'clearSpaceOnClick' exists don't add another td, if it doesn't - add it!
if ($('#clearSpaceOnClick').length) {} else {
$("table#shopping-cart-items tr td.image").after($('<td id="clearSpaceOnClick"></td>'));
}
});
});
});
</script><style>
.checkoutBasket table.cart-container td.image img {
width: 200px;
height: auto;
}
#clearSpace {
padding: 0 0 0 15px;
}
</style>
該代碼片段是一個空白頁面。 –
我沒有看到任何圖像在屏幕視頻中變得更大。一個小提琴或生動的例子會更有用 – yezzz
@MinaJacob我正在注入到網頁上，因爲我沒有直接訪問源代碼。 –